Internet Explorer错边，其他好 [英] Internet Explorer wrong margin, Others good
问题描述
我遇到了一个小问题。第一次我做一个UL菜单，箭头在右边，没有JS。
I got a tiny problem. First time I am doing a UL menu with an arrow poping on the right... without JS.
我有一个小问题。在Internet Explorer中... IE在 #subMenu ul li 中显示arround 2px的边距（因此我们看到页面背景）。在其他broswer一切都很好。
I got a small problem. In Internet Explorer... IE show a margin in #subMenu ul li of arround 2px (so we see the page background). In other broswer everything is fine.
此外，我想，看到的右侧的PNG。如果UL是0px-100px左，那么pic将出现在100px-122px左边。 IE不显示图片，其他。
Also, I am suppose to the see the PNG on the right of the UL. If UL is 0px-100px left then the pic will appear at 100px-122px left. IE doesnt show the pic, other does.
好：FF 9.0.1，Safari 5.1.2，Opera 11.60，Chrome 16.0.912.75
错误：IE 9.0.4
Good : FF 9.0.1, Safari 5.1.2, Opera 11.60, Chrome 16.0.912.75 Wrong : IE 9.0.4
我没有尝试过，但是边框错误：
I did try this but... border goes wrong with this :
#subMenu ul li{
list-style-type: none;
margin: -2px;
}
这里是我的意思： http://i44.tinypic.com/6poy8i.jpg
这里是测试页：
Here's picture of what I mean : http://i44.tinypic.com/6poy8i.jpg Here's the test page :
<html>
<head>
<style>
html, body{
margin: 0px;
padding: 0px;
font-family: Arial;
font-size: 12px;
}
#wrapper{
}
#subMenu{
padding: 5px;
}
#subMenu .wrapMenu{
width: 180px;
}
#subMenu ul{
list-style-type: none;
width: 100%;
padding: 0px;
margin: 0px;
height: auto;
}
#subMenu ul li{
list-style-type: none;
margin: 0px;
}
#subMenu ul li:hover{
width: 100%;
}
#subMenu ul li a,
#subMenu ul li a:link,
#subMenu ul li a:visited{
text-decoration: none;
color: #b9b9b9;
display: block;
background-color: #f5f5f5;
border-left: 1px solid #c3c3c3;
border-bottom: 1px solid #c3c3c3;
border-right: 1px solid #c3c3c3;
width: 100%;
height: 48px; /* padding-top + padding-bot + height de ul li span*/
}
/*f9f9f9*/
#subMenu ul li a:hover{
color: #7a7a7a;
border-right: 0px;
background-color: #f9f9f9;
}
#subMenu ul li span{
width: 100%;
float: left;
height: 20px;
display: block;
padding: 14px 6px 14px 20px;
}
#subMenu ul li span:hover{
background: transparent url('subMenu_Arrow.png') no-repeat 180px 0px;
}
#subMenu ul li a.first{
border-top-left-radius: 3px;
border-top: 1px solid #c3c3c3;
}
#subMenu ul li a.last{
border-bottom-left-radius: 3px;
}
</style>
</head>
<body>
<div id="subMenu">
<div class="wrapMenu">
<ul>
<li><a class="first" href="#"><span>Arrêts</span></a></li>
<li><a href="#"><span>Avis</span></a></li>
<li><a href="#"><span>Planibus</span></a></li>
<li><a class="last" href="#"><span>Trajets</span></a></li>
</ul>
</div>
</div>
</body>
</html>
推荐答案
$ b解决方案
您需要指定 doctype 作为您的标记。如果没有 doctype ，IE将以 quirks模式 a>，这本质上是IE 5.5渲染引擎。
You need to specify a doctype as the first line in your markup. Without a doctype, IE will render in quirks mode, which is essentially the IE 5.5 rendering engine. Quirks mode greatly effects the box model, among other things.
示例：
<!doctype html>
指定 doctype 将产生正确的结果
这篇关于Internet Explorer错边，其他好的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
