如何针对 IE 7 空白错误在此 li 上触发 hasLayout

发布于 2024-12-19 09:41:39 字数 1361 浏览 3 评论 0原文

这是它的 HTML 部分：

<nav id="main-navigation">
<ul>
    <li><a href="#" target="_self">lorem ipsium lorem ipsium lorem</a></li>
    <li><a href="#" target="_self">lorem ipsium lorem lorem</a></li>
    <li><a href="#" target="_self">lorem ipsium lorem ipsium lorem</a></li>
    <li><a href="#" target="_self">lorem ipsium lorem</a></li>                     
</ul>
</nav>

这是 CSS：

#main-navigation ul li a {    
    display:block;
    font-size: .8em;
    background: lime url("http://www.hpp.moh.gov.sg/HPP/MungoBlobs/636/378/bullets_doctors.gif") no-repeat right center;
    border-top: 1px dotted #ccc;
    color:#000; 
    padding: 2px 0;
}

#main-navigation ul li a.last {
    border-bottom: 1px dotted #ccc;
}


#main-navigation ul li a:hover,
#main-navigation ul li a:focus,
#main-navigation ul li a:active{
    background: red url("http://www.hpp.moh.gov.sg/HPP/MungoBlobs/636/378/bullets_doctors.gif") no-repeat right center;
    color:#fff
}

我不想更改 html 标记。

如果您在良好的浏览器上看到这一点，然后在 IE 7 上看到这一点，您会发现 IE7 上的 LI 项目之间有很多空白。

我尝试应用 height:1px;在仅限 IE 的 css 相关文件上的 a 上。运气不好。

如何正确触发 hasLayout 以使空白错误消失？

原文

Here's the HTML part of it:

<nav id="main-navigation">
<ul>
    <li><a href="#" target="_self">lorem ipsium lorem ipsium lorem</a></li>
    <li><a href="#" target="_self">lorem ipsium lorem lorem</a></li>
    <li><a href="#" target="_self">lorem ipsium lorem ipsium lorem</a></li>
    <li><a href="#" target="_self">lorem ipsium lorem</a></li>                     
</ul>
</nav>

Here's the CSS:

#main-navigation ul li a {    
    display:block;
    font-size: .8em;
    background: lime url("http://www.hpp.moh.gov.sg/HPP/MungoBlobs/636/378/bullets_doctors.gif") no-repeat right center;
    border-top: 1px dotted #ccc;
    color:#000; 
    padding: 2px 0;
}

#main-navigation ul li a.last {
    border-bottom: 1px dotted #ccc;
}


#main-navigation ul li a:hover,
#main-navigation ul li a:focus,
#main-navigation ul li a:active{
    background: red url("http://www.hpp.moh.gov.sg/HPP/MungoBlobs/636/378/bullets_doctors.gif") no-repeat right center;
    color:#fff
}

I wish not to change the html markup.

If you see this on good browsers and then on IE 7, you will see that the LI items on IE7 have a lot of white space between them.

I've tried to apply height:1px; on a on a IE only css related file. No luck.

How can one properly trigger the hasLayout so that the white space bug could go away?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

北音执念 2024-12-26 09:41:39

解决方案：

HTML 部分：

 <!--[if lt IE 9]>
  <link rel="stylesheet" href="badbrowser.css"/>
<![endif]-->

badbrowser.css 的 CSS 部分：

/* Fix for vertical list LI white space - hasLayout trigger */
#main-navigation li a {
    display:inline-block;
}

#main-navigation li a {
    display:block;
}

Solution:

HTML part:

 <!--[if lt IE 9]>
  <link rel="stylesheet" href="badbrowser.css"/>
<![endif]-->

CSS part of badbrowser.css :

/* Fix for vertical list LI white space - hasLayout trigger */
#main-navigation li a {
    display:inline-block;
}

#main-navigation li a {
    display:block;
}

回复收藏 0 原文