Question

我的私人网页的主要内容并未在Firefox中显示奇怪。页眉和页脚栏都显示，主文本位于右侧。有时，页脚也会移动到正文上方。我猜这是涉及DIV定位的所有问题，我在某种程度上错过了。 [这已经解决了]

在Chrome中显示时同样高的两个DIV的高度也不同。 Safari中也会出现此问题，但方式不同。在Chrome或Firefox中查看时，徽标和导航栏之间存在1 px的间隙。任何人都可以想到一种重置所有浏览器默认设置的方法，以防止将来发生类似的事情吗？

该网站目前尚未上线，我正在调试最终版本。（我真的不想在当前条件下发布它，因为它会使任何不使用webkit浏览器的人感到沮丧。）

另外，作为旁注，任何人都知道如何修复我在Internet Explorer 9中获得的CSS错误？导航栏中的渐变消失，某些区域缺少背景颜色，并且所有图片链接周围都有恼人的框。

编辑：我在一个在线CSS渐变生成器中看到了我需要做的是使渐变在IE9中工作。背景问题显然源于同一来源。

此外，Opera中是否有人遇到http://jsbin.com/ipixay/1最新调试版本的问题？（这个信用归功于Sunyatasattva。）

小提琴的链接（代码发布的位置）是：http://jsfiddle.net/aaQSD/7/请原谅我仍然存在的CSS数量，但我不知道是什么导致了Internet Explorer 9的问题。< / p>

我最好的猜测是Firefox的问题出在CSS的这一部分：

body {
    margin: 0;
    padding: 0;
    text-align: center;
    font-family: Times;
    background: #efefef url(pics/background.png) repeat top center;
}
#container {
    overflow:auto;
    width: 95%;
    min-height: 100%;
    min-width: 946px;
    margin: 0 auto 10px auto;
}
#content-wrapper {
    width: 100%;
    float: right;
    text-align: left;
    margin: 10px 0 0 0;
}
#content-inner {
    padding: 0 15px 0 15px;
}
.center-slide {
    font: normal 62.5%/1.5 Times;
    letter-spacing: 0;
    width: 900px;
    height: 485px;
    position: relative;
    padding: 20px 0 0 0;
    margin: 0 auto 0 auto;
    background-color: #FFFFFF;
    border-radius: 8px;
}
.boxes {
    margin: 0 auto 0 auto;
    width: 900px;
}
.left-box {
    float: left;
    background-color: #FFFFFF;
    border-radius: 8px;
    margin: 10px 5px 0 0;
    padding: 20px;
    width: 500px;
    position: relative;
}
.logo {
    width: 26%;
    text-align: center;
    float: left;
    font-family: Times;
    font-size: 65px;
    font-weight: bold;
    color: #FFFFFF;
    padding: 10px 0 0 0;
    background-image: -moz-linear-gradient(0% 22px 90deg, #0B3474, #517ABA);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 70%, from(#517ABA), to(#0B3474));
}
header {
    width: 100%;
    min-width: 863px;
    background-color: #000047;
    float: left;
    padding: 10px;
    color: #FFFFFF;
    text-align: left;
    font-size: 20px;
    overflow: hidden;
    margin: 0 0 10px 0;
}
nav {
    background-color: #6a6a6a;
    font: 16px Times;
    min-width: 700px;
    float: right;
    width: 74%;
}
footer {
    font-family: Times;
    text-align: center;
    background-color: #000047;
    color: #FFFFFF;
    text-align: center;
    padding: 10px 0;
    width: 100%;
    min-width: 863px;
}

以下是已修复的事项列表：

图片周围不需要的盒子/边框
Firefox显示问题
Glitchy footer

编辑：我正在努力制作一个小问题，以便按照评论中的建议复制问题。我希望你能原谅我的错误。谢谢，到目前为止已经回复的每个人！

编辑2：小提琴出来了！我删除了曾经在下面的潘多拉盒子代码。

Answer 1

我编辑了你的小提琴，让它起作用。我基本上只是将float: left;添加到您的#container。您可以查看我的编辑以获取更多详细信息。 http://jsfiddle.net/aaQSD/8/

Answer 2

页眉和页脚显示在主容器附近

他们浮动的原因是什么？从标头中删除float: left规则，使容器堆栈位于其下方。如果由于某些原因需要浮动我没看到，也许你应该考虑添加一个clear？

徽标高度与导航栏元素高度不同

这篇文章让我感到困惑：我认为罪魁祸首是浏览器默认line-height属性，在Chrome上，巧合使您的元素对齐。

你的导航元素的集合line-height为61，两边的垂直padding为12，最多可增加85px。您的徽标没有定义line-height和font-size 65px加上padding-top 10px。在Firefox中，这是10px短。

要解决此问题，只需将line-height设置为您的徽标元素即可。

以下是您的代码的工作JSBin：

Working example

Internet Explorer问题：


缺少渐变

缺少背景

恼人的边界

我现在手头没有IE9，所以如果你需要它我可能会在以后查看，但这是我的猜测。

对于缺少的渐变，您的CSS仅指定webkit和mozilla vendor prefixes。您可能还需要查看-ms–前缀，并检查哪些规则确实需要它，哪些规则不需要。

我正在跳过丢失的背景部分，因为它很模糊，我现在没有在IE上测试。

对于链接图像周围的边框，您可以将此规则添加到CSS中：

a img {
    border: 0;
    outline: 0;
}

修改

Safari恼人的一个像素差距

至于Safari令人烦恼的一个像素差距，显然是因为Safari不能很好地计算你的float: left + width: 26%加float: right + width: 74%。在第一个元素宽度上添加.1%可以解决问题，但这不是最优雅的解决方案。

解决您手头问题的最佳方法是将两个元素左移。您可以在Safari中看到更新的小提琴：

Working example

DIV标签表现得很奇怪

2 个答案: