我正在为CMS构建一些基本的HTML代码.
CMS中与页面相关的选项之一是“背景图像”和“拉伸页面宽度/高度到背景图像宽度/高度”.因此,对于大背景图像,整个事物变得可见.
我目前的屏幕分辨率是1280 x 1024.
如果我执行以下操作:
>指定宽度为1400像素的背景图像
>将“位置”指定为“中心”(水平/垂直)
>指定“拉伸页面宽度到背景图像宽度”
然后在FF中,发生以下情况:
>页面正确拉伸到1400px.我得到一个水平滚动条,因为我的屏幕小于那个.到现在为止还挺好.
>现在奇怪的是:背景图像不是相对于1400px居中,因此显示了完整的图像,但是相对于我的1280px的视口,隐藏了一部分图像超出了屏幕的左边缘,并留下了白色条纹向右而不是显示整个图像.
>没有其他元素(DIV,包装器……)可以操纵任何东西.所有设置都直接在正文中.
更新:IE正确完成.谷歌Chrome有同样的问题.
就好像Firefox首先渲染100%宽度的背景图像,居中,然后注意到身体需要拉伸到1400px.
这是正常的Firefox行为吗?
任何想法我能做什么?
发布一个链接会有点麻烦,因为它都在一个封闭的开发环境中,但如果一切都失败了,我会把一些东西放在一起看.
CSS:
body
{
background-image: url(http://www.domain.com....image.jpg);
background-repeat: no-repeat;
background-position: center center;
min-width: 1400px;
height: 100%;
}
在IE中,html表示整个文档画布并展开以适合放大的主体宽度.在其他浏览器中,它的作用与任何其他显示一样:块元素并保持视口宽度,无论您放入什么内容.其他浏览器在这里可以说更正确,但CSS规范在这个主题上并不十分清楚,结果是IE中的结果更接近地代表了关于画布的14.2的措辞.无论哪种方式,它都没有真正指定可靠的行为.
通过在html而不是body上设置宽度和背景,您可以跨浏览器获得一致的结果. (请记住在IE中使用标准模式.)
但是一个1400px的固定宽度文档?听起来真的很糟糕.