Question

我使用蔑视主题（wordpress）建立了一个网站，我正在改变它的CSS以使其更宽。

问题是我可以在Internet Explorer或Firefox和Chrome上看起来很棒，但不能同时在所有3个上看。

如果我删除侧边栏标记：

#sidebar {
width:200px;
padding:20px 200px 10px;
}

该页面在IE浏览器上看起来很好（现在是 - physiocall.co.il），但侧边栏隐藏在Firefox和Chrome中。

如果我将这个小标签添加到css中 - 该网站在Firefox和Chrome上看起来很棒（侧边栏向左推到它的位置）但在IE上，它会下降 - 低于整个页面。

任何想法如何更改css以使其在IE和Firefox上看起来都正确。是什么原因导致FF和Chrome以某种方式呈现css，以及IE以另一种方式呈现？

感谢。

整个CSS：

#content {
float:right;
width:649px;
margin:-50px 30px 0;
padding:0 0 20px 45px;
}

#topbar {
max-width:950px;
height:25px;
line-height:23px;
background:#FFFFE6;
overflow:hidden;
border-bottom:1px black solid;
margin:0;
}

#pagebar {
background:url('images/blue_flower/pagebar.jpg');
width:950px;
height:35px;
border-bottom:1px black solid;
margin:0;
padding:0;
}

#pagebar .children li,#pagebar .sub-menu li {
min-width:105px;
border-left:1px #e1e1e1 solid;
border-bottom:1px #e1e1e1 solid;
margin:0;
padding:0;
}

#pagebar ul a {
background-color:#f1f1f1;
width:101px;
}

#page {
width:950px;
}

#sidebar {
width:200px;
padding:20px 200px 10px;
}

Answer 1

很抱歉这样说，但你应该从头开始并完全重新排列你的html输出和css。也许这是一个编码练习，因为rtl但你的#content出现在侧边栏之前并有一个浮动：右边，而你的边栏左边是内容，边距为左边：530px。

，您的内容宽度为640 ..

无法解决问题，并且不会被某些狡猾的css技巧修复。

对不起。

Answer 2

因为它适用于IE而不是现代浏览器，这告诉我你使用IE作为初始测试。从来没有这样做过。 IE在现代标准和合规性方面落后于其他所有人12年。在最好的情况下，你永远不应该相信IE做任何事情。

自从我使用框架以来已经有很长一段时间了，所以我不确定索引页面上是否缺少doctype会导致问题。

因此，在重新编写标记时，使用任何浏览器，但使用IE进行初始测试。然后看看IE如何将其拧紧。 IE中的怪癖和错误是众所周知的，修复它的黑客也是如此。

Answer 3

解决方案是

#sidebar {
float:left;
width:200px;
margin:-20px 10px 5px 5px;
}

看起来IE和FF与float参数具有相反的默认值，因此无法直接设置它。一旦给定浮动值，边距就固定了两个浏览器的剩余部分。

IE，Firefox和Chrome之间的CSS兼容性（wordpress）

3 个答案: