Question

我用图片替换了我的一个菜单项，并使用下面的代码对其进行了样式设置。它在Firefox，Chrome，Safari和Opera中看起来很好，但在IE中它似乎忽略了相对定位。

li#menu-item-19 a {
   display: block;
   background-image: url('images/logo.png');
   background-repeat: no-repeat;
   width: 124px;
   height: 120px;
   text-indent: -9000px;
   margin-right: -42.5px;
   margin-left: -42.5px;
   position: relative;
   top: -31px;
   margin-top: -31px;
   z-index: 1;
}

我无法显示整个网站，因为它不是现场，但我已经设置了一个更简单的版本，我已经能够复制该问题。

http://labs.comule.com/

谢谢：）

Answer 1

这是错误，因为您在网站中使用了内联阻止....

试试这个

将DOCTYPE添加到您的html，

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 在我添加之后，它对我有用。

Answer 2

这个网站让我得到了我在下面解释的内容：http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

基本上我所做的就是添加vertical-align：top;到li元素，然后我删除了margin-top：-31px;来自li＃menu-item-19 a。

我希望这有助于其他人！

图像作为Wordpress菜单项未在IE中正确定位

2 个答案: