宽度设置为 1280 的 Div 在 Firefox 和 IE 中以 1600 宽度显示答案

【问题标题】：Div with width set to 1280 is displaying at 1600 width in Firefox and IE宽度设置为 1280 的 Div 在 Firefox 和 IE 中以 1600 宽度显示
【发布时间】：2015-06-25 09:10:03
【问题描述】：

我有一个用于背景的 div，具有设定的宽度和高度。对于 div 和使用的图像，尺寸为 1280x960。但在 Firefox 或 IE 中，div 的宽度为1600。我尝试添加一个最大宽度，将填充设置为 0，我什至仔细检查以确保我的浏览器窗口没有被放大。我认为我不需要为类似的东西做任何 -webkit-moz- 添加宽度和高度，但 Chrome 是主要三个中唯一按我的意图显示它的一个。

我的代码：

<style>
#background
{
    width: 1280px;
    max-width: 1280px;
    height: 960px;
    background-image: url("img/background.png");
    position: relative;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
}
</style>
</head>
<body>
    <div id="background">
    </div>
</body>

【问题讨论】：

我没看错，codepen.io/anon/pen/aOoWMq。
您的代码也向我展示了一个 1600 像素宽的图像。 :(
你确定你没有使用任何 FF 插件或者视口被放大了吗？

标签： html css internet-explorer firefox

【解决方案1】：

这个方法可以帮到你

#background { 
   width: expression( document.body.clientWidth > 1279 ? "1280px" : "auto" ); 
   /* sets max-width for IE */
}

#background { 
   max-width: 1280px; 
   /* this sets the max-width value for all standards-compliant browsers */
}

【讨论】：

IE 从版本 7 开始支持max-width。

【解决方案2】：

你需要为背景img设置background-repeat: no-repeat;和background-size:cover;

#background  {
    width: 1280px;
    height:960px;
    max-width: 1280px;
    background-image: url("http://placehold.it/1280x960");
    background-size:cover;
    background-repeat:no-repeat;
    position: relative;
    margin:0 auto;
    padding: 0;
}

演示 http://jsfiddle.net/a_incarnati/mLxn46kj/5/

【讨论】：

背景与宽度有什么关系？
我知道你的意思，但我没有在代码中看到任何错误。也许是她在 Firefox 上缓存的 smt，或者是代码中的 smt 其他问题。当显示的代码只有几行而不是整个代码的 jsfiddle 时，就会发生这种情况。
此代码由另一个用户提供，并且遇到了同样的问题：codepen.io/anon/pen/aOoWMq