HTML / CSS：IE将偏移量添加到 <li> -在FF中看起来不错
[英]HTML/CSS: IE adding offset to <li> - looks fine in Chrome, FF
问题描述
Yes, another IE-only problem for your Thursday. 
是的，您星期四的另一个仅限IE的问题。 :) :)
http://jsfiddle.net/dex3703/nwTUm/ http://jsfiddle.net/dex3703/nwTUm/
This layout looks fine in Chrome, but the li in both the top horizontal menu and the left side vertical menu includes an offset in IE9. 此布局在Chrome中看起来不错，但顶部水平菜单和左侧垂直菜单中的li在IE9中都包含偏移量。 IE shows this in the F12 tools when I select an li and look at the "Layout" tab. 当我选择li并查看“布局”选项卡时，IE在F12工具中显示了这一点。
(Note that if you look at the fiddle in IE, it displays properly in the result window!) （请注意，如果您查看IE中的小提琴，它将在结果窗口中正确显示！）
Any other comments regarding tidying up the markup/css appreciated. 任何其他有关整理标记/ css的意见均表示赞赏。 Also I'm only interested in IE9. 另外我只对IE9感兴趣。
3 个解决方案
解决方案1
0 2012-01-05 18:48:55
Changing the display property to inline for #topnav li will fix it for IE but you will have to do additional work to get it to look right in other browsers. 将#topnav li的display属性更改为inline会为IE修复它，但您必须做一些额外的工作才能使其在其他浏览器中正确显示。
#topnav li
{
margin-left: 15px;
padding: 0 5px;
font-weight: bold;
color: #767676;
height: 100%;
border-top: 4px solid #DBDBDB;
line-height: 5em; /* for vertical alignment */
display: inline;
}
http://jsfiddle.net/dex3703/nwTUm/ http://jsfiddle.net/dex3703/nwTUm/
解决方案2
0 2012-01-05 18:53:31
Since it works well in jsfiddle, chances are you aren't using a doctype. 由于它在jsfiddle中运行良好，因此很有可能您没有使用doctype。 Add this to the first line of your page and see if that fixes it: <!DOCTYPE html> . 将此添加到页面的第一行，看看是否可以解决： <!DOCTYPE html> 。 Otherwise you are in quirks mode. 否则，您将处于怪异模式。
解决方案3
0 已采纳 2012-01-06 18:12:18
我重新启动了计算机，它在IE9和Chrome中正常运行。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.