Question

通常wordpress模板会为您提供跨浏览器兼容性，但我基本上构建了自己的模板，并且我不必在一段时间内处理IE问题。除了#social和#menu之外，一切似乎都运行正常。这些的CSS在这里：

#social {
float:left;
width:500px;
display:inline;
margin:333px 0 -420px 208px;
}

#menu {
display:inline;
background:transparent;
width:100%;
float:left;
margin:365px 0 0 -55px;
text-transform:lowercase;
}

这是网站： http://www.erisdesigns.net/STAGE/ED1.3/

我看起来是一个简单的定位问题。我真的只关心让他们在IE7和IE8中工作。谢谢你的帮助。

Answer 1

如果标题的宽度/高度是固定的，并且您希望每个元素出现在标题中的某个位置，则使用float和margin是一个坏主意。你把自己置于浏览器特性的摆布之下，IE并不是很怜悯。改为使用绝对定位。

首先，将position: relative;添加到#headercontent元素。（或者删除它，只使用#header。我没有看到有两个标题div的点。）如果有必要，还要给标题一个固定的高度，以便在重新排列其他元素时它不会崩溃。

现在，使用position: absolute;定位标题中的每个元素（引号，菜单和社交媒体图标），并为其顶部和左侧（或底部和右侧）属性指定固定的数值。

是的，绝对定位感觉像是蛮力而且不那么优雅，但是包括IE在内的所有浏览器都倾向于服从暴力，如果没有别的话。

与/ wordpress的IE兼容性问题

1 个答案: