HTML/CSS: IE adding offset to <li> - looks fine in Chrome, FF
Question
Yes, another IE-only problem for your Thursday. :)
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. IE shows this in the F12 tools when I select an li and look at the "Layout" tab.
(Note that if you look at the fiddle in IE, it displays properly in the result window!)
Any other comments regarding tidying up the markup/css appreciated. Also I'm only interested in IE9.
3 answers
solution1
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
{
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;
}
solution2
0 2012-01-05 18:53:31
Since it works well in jsfiddle, chances are you aren't using a doctype. Add this to the first line of your page and see if that fixes it: <!DOCTYPE html> . Otherwise you are in quirks mode.
solution3
0 ACCPTED 2012-01-06 18:12:18
我重新启动了计算机，它在IE9和Chrome中正常运行。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.