CSS <ul> <li> 在 IE7 中的差距
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2923735/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS <ul> <li> gap in IE7
提问by Gidon
I have a CSS <ul><li>nested menu that works perfectly in IE 8 and firefox but in IE7 it produces a small gap between the elements.
this is my CSS:
我有一个 CSS<ul><li>嵌套菜单，它在 IE 8 和 firefox 中完美运行，但在 IE7 中它会在元素之间产生一个小间隙。这是我的 CSS：
#nav, #nav ul
{
margin: 0;
padding: 0;
list-style-type: none;
list-style-position: outside;
position:static;/*the key for ie7*/
line-height: 1.5em;
}
#nav li
{
float: inherit;
position: relative;
width: 12em;
}
#nav ul
{
position: absolute;
width: 12em;
top: 1.5em;
display: none;
left: auto;
}
#nav a:link, #nav a:active, #nav a:visited
{
display: block;
padding: 0px 5px;
border: 1px solid #258be8; /*#333;*/
color: #fff;
text-decoration: none;
background-color: #258be8; /*#333;*/
}
#nav a:hover
{
background-color: #fff;
color: #333;
}
#nav ul li a
{
display: block;
top: -1.5em;
position: relative;
width: 100%;
overflow: auto; /*force hasLayout in IE7 */
right: 12em;
padding:0.5em;
}
#nav ul ul
{
position: absolute;
}
#nav ul li ul
{
right: 13em;
margin: 0px 0 0 10px;
top: 0;
position: absolute;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul
{
display: none;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul
{
display: block;
}
#nav li
{
background: url(~/Scripts/ourDDL/ddlArrow.gif) no-repeat center left;
}
#divHead, #featuresDivHead
{
padding: 5px 10px;
width: 12em;
cursor: pointer;
position: relative;
background-color: #99ccFF;
margin: 1px;
}
/* Holly Hack for IE \*/
* html #nav li { float: left; height: 1%; }
* html #nav li a { height: 1%; }
/* End */
and here is an example for a menu:
这是菜单的示例：
<ul id='nav'><li><a href="#">Bookstore Online</a></li>
<li><a href="#">Study Resources</a></li>
<li><a href="#">Service Information</a></li>
<li><a href="#">TV Broadcast</a></li>
<li><a href="#">Donations</a></li></ul>
回答by Anton
I actually fixed it by setting vertical-align: bottomto LI elements (and yes, I didn't remove spaces and line breaks :)
我实际上是通过设置vertical-align: bottom为 LI 元素来修复它的（是的，我没有删除空格和换行符 :)
回答by David says reinstate Monica
If you're displaying the <li>elements inline (to create a horizontal menu) the line-breaks between the sibling <li>s are being converted into a single white-space. You can either comment-out the spaces, or put all the siblings on the same line:
如果您要<li>内联显示元素（以创建水平菜单），则兄弟<li>s之间的换行符将转换为单个空格。您可以注释掉空格，也可以将所有兄弟放在同一行：
commenting-out:
评论：
...<li>element One</li><!--
--><li>element Two</li><!--
--><li>element Three</li>...
or:
或者：
...<li>element One</li
><li>element Two</li
><li>element Three</li>...
(in the latter example note the closing >of the <li>tags on the next line immediately preceding the next sibling)
（在后一种示例注意关闭>的的<li>标签上立即下一个同级之前的下一行）
or you can use same-line siblings:
或者您可以使用同线兄弟姐妹：
...<li>element One</li><li>element Two</li><li>element Three</li>...
You could also just use float: lefton the lielements, which takes them out of the inline document flow. Possibly a negative left-margin to move the lileft to 'cover' the preceding whitespace, though it would likely take trial and error to find a suitable measurement to cover the space without covering the preceding lielement.
您也可以只float: left在li元素上使用，这会将它们从内联文档流中移除。可能是一个负的左边距以li向左移动以“覆盖”前面的空白，尽管可能需要反复试验才能找到合适的度量来覆盖空间而不覆盖前面的li元素。
回答by Elias Zamaria
It may be because of the spaces between the list items. You can either fix the problem by removing the spaces between the list items like this:
这可能是因为列表项之间的空格。您可以通过删除列表项之间的空格来解决问题，如下所示：
<ul id='nav'><li><a href="#">Bookstore Online</a></li><li><a href="#">Study Resources</a></li><li><a href="#">Service Information</a></li><li><a href="#">TV Broadcast</a></li><li><a href="#">Donations</a></li></ul>
Or this:
或这个：
<ul id='nav'><li><a href="#">Bookstore Online</a></li><li
><a href="#">Study Resources</a></li><li
><a href="#">Service Information</a></li><li
><a href="#">TV Broadcast</a></li><li
><a href="#">Donations</a></li></ul>
Or if you want nicer-looking HTML, you can put comments between the list items:
或者，如果您想要更好看的 HTML，您可以在列表项之间添加注释：
<ul id='nav'><li><a href="#">Bookstore Online</a></li><!--
--><li><a href="#">Study Resources</a></li><!--
--><li><a href="#">Service Information</a></li><!--
--><li><a href="#">TV Broadcast</a></li><!--
--><li><a href="#">Donations</a></li></ul>
There are also tricks to remove the spaces using CSS, as described here.
也有技巧，以删除使用CSS的空间，如所描述这里。
回答by Sean Don
Fix: Add zoom:1 and *display: inline to the element in CSS
修复：将 zoom:1 和 *display: inline 添加到 CSS 中的元素
Original CSS:
原始 CSS：
.blueberry .pager li {
display: inline-block;
}
Fixed CSS:
固定 CSS：
.blueberry .pager li {
display: inline-block;
zoom: 1;
*display: inline;
}
The asterisk (*) in front of display: inline allows for other browsers to ignore that line.
display: inline 前面的星号 (*) 允许其他浏览器忽略该行。
from: http://uncorkedstudios.com/2011/12/12/how-to-fix-the-ie7-and-inline-block-css-bug/
来自：http: //uncorkedstudios.com/2011/12/12/how-to-fix-the-ie7-and-inline-block-css-bug/
回答by edl
I assume you're trying to make a horizontal nav? Try adding display:inline to your container. EDIT:
我假设您正在尝试制作水平导航？尝试将 display:inline 添加到您的容器中。编辑：
NM. In ie6, they show up as a horizontal bar. +1 for mikez's answer. that should do it.
NM。在 ie6 中，它们显示为一个水平条。+1 为 mikez 的回答。应该这样做。
回答by corymathews
In your current model its the extra space between li tags. Really dumb IE thing. The following css however works to fix it and keep your li tags from being all on 1 line. (tested in IE7, Opera, Chrome)
在您当前的模型中，它是 li 标签之间的额外空间。真是愚蠢的 IE 东西。但是，以下 css 可以修复它并防止您的 li 标签全部位于 1 行。（在 IE7、Opera、Chrome 中测试）
<style type="text/css">
#nav { margin:0; padding:0; list-style-type: none; width:12em; }
#nav li { position:relative; background:url(~/Scripts/ourDDL/ddlArrow.gif) no-repeat center left; display:inline; }
#nav a,
#nav a:active,
#nav a:visited { display:block; padding:5px; border:1px solid #258be8; color:#fff; text-decoration:none; background-color:#258be8; width:100%; }
#nav a:hover { background-color: #fff; color: #333; }
</style>
You had a lot of extra code for dropdowns maybe? anywho I didn't add that.
您可能有很多用于下拉菜单的额外代码？我没有添加的任何人。
回答by user1089574
you can add this styles to your styles.ie.css
您可以将此样式添加到您的styles.ie.css
/* for IE7 only */
*+html #nav { font-size: 0; line-height: 0;}
*+html #nav li {font-size: 12px; line-height: 18px; }
