加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 资源网站 > 资源 > 正文

html – Firefox背景图像水平居中奇怪

发布时间:2020-12-14 22:42:00 所属栏目:资源 来源:网络整理
导读:我正在为CMS构建一些基本的HTML代码. CMS中与页面相关的选项之一是“背景图像”和“拉伸页面宽度/高度到背景图像宽度/高度”.因此,对于大背景图像,整个事物变得可见. 我目前的屏幕分辨率是1280 x 1024. 如果我执行以下操作: 指定宽度为1400像素的背景图像

我正在为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%;
 }
最佳答案
你被CSS规范的怪癖所困扰:多亏了section 14.2,你应用于body元素的任何背景图像都会成为html的背景. (这是为了让作者可以继续使用身体标签上的背景,他们期望它来自CSS之前的浏览器.)

在IE中,html表示整个文档画布并展开以适合放大的主体宽度.在其他浏览器中,它的作用与任何其他显示一样:块元素并保持视口宽度,无论您放入什么内容.其他浏览器在这里可以说更正确,但CSS规范在这个主题上并不十分清楚,结果是IE中的结果更接近地代表了关于画布的14.2的措辞.无论哪种方式,它都没有真正指定可靠的行为.

通过在html而不是body上设置宽度和背景,您可以跨浏览器获得一致的结果. (请记住在IE中使用标准模式.)

但是一个1400px的固定宽度文档?听起来真的很糟糕.

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读