Question

这是我正在处理的页面：http://devel.spoorle.com/poc/

在底部有一个名为footer的div，其中包含3个其他div：logo_lower，annoucements_online和menu_lower。其中两个有固定宽度，logo_lower 406px和menu_lower 329px，而annoucements_online从jquery脚本获取宽度：

var annoucementsWidth = $(window).width() - $("#menuLower").width() -    $("#logoLower").width();
$("#annoucementsOnline").css("width",annoucementsWidth + "px");

对于Opera，Firefox甚至IE 8都可以很好地工作，但我对Safari和Chrome有问题。 menu_lower div没有显示......任何想法它可能是什么？我在某处看到jquery为这些浏览器计算了错误的$（widow）.width（）。我试图将我的代码放在$（window）.load（）中，但没有成功。以下是div：

div.logo_lower {
width: 406px;
height: 45px;
display: inline-block;
float: left;
overflow: hidden;
}

div.annoucements_online {
background: #362f2d;
height: 45px;
display: inline-block;
overflow: hidden;
}

div.menu_lower {
background: #362f2d;
width: 329px;
height: 45px;
display: inline-block;
float: right;
overflow: hidden;
}
div.footer {
width: 100%;
height: 45px;
position: fixed;
bottom: 0;
left: 0;
z-index: 100;
background: rgba(0, 0, 0, 0);
}

Answer 1

尝试获取这样的宽度而不是使用jQuery。

document.documentElement.clientWidth

Answer 2

您的jQuery需要进入$(document).ready()而不是$(window)。此外，当我在Chrome上测试您的网站时，我得到的结果与Firefox相同。

如果jQuery打得不好，你可以随时使用vanilla JavaScript route（more info），虽然这更复杂，因为jQuery通常会为你提供所有的兼容性。

Answer 3

好的我以其他方式解决了这个问题，我只是将公告div缩小了5px：

var annoucementsWidth = $(window).width() - $("#menuLower").width() -    $("#logoLower").width() - 5;
$("#annoucementsOnline").css("width",annoucementsWidth + "px");

jquery css与chrome / safari浏览器的奇怪问题

3 个答案: