代码之家 › 专栏 › 技术社区 › Dani

IE、Firefox和Chrome之间的CSS兼容性(wordpress)

wordpress css

Dani · 技术社区 · 14 年前

我已经建立了一个网站使用藐视主题(wordpress),我正在改变它的CSS,使其更广泛。

问题是,我可以让它看起来很好,无论是在Internet Explorer或Firefox和chrome,但不是所有3个在同一时间。

如果删除侧栏标记:

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

这个页面在IE上看起来不错(现在是physicall.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;
}

3 回复 | 直到 13 年前

tobiasmay 14 年前

很抱歉这么说,但是您应该从头开始,完全重新安排您的html输出和css。也许这是基于rtl的编码实践,但是你的#内容出现在侧边栏之前,并且有一个float:right,而你的侧边栏位于内容的左侧,边距为530px。

你的内容有640宽。。

这是行不通的,也不能通过一些漂亮的css技巧来解决。

对不起的。

Rob 14 年前

因为它在IE中工作,但在现代浏览器中不起作用,这告诉我你使用IE作为初始测试。永远,永远不要那样做。IE在现代标准和法规遵从性方面落后于所有其他公司12年。充其量是无能的,你不应该相信(做任何正确的事)。

我已经很长时间没有使用框架了,所以我不确定索引页上缺少doctype,这会使您进入古怪的模式,从而导致问题。

因此,在重新编写标记时,请使用除IE之外的任何浏览器进行初始测试。然后看看我是怎么搞砸的。IE中的怪癖和漏洞是众所周知的,解决它的黑客也是众所周知的。

Dani 14 年前

解决办法是

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

看起来IE和FF的默认值与float参数相反,因此无法将其直接设置。一旦给定一个浮点值,边距就修复了两个浏览器的其余部分。