列出在Internet Explorer中无法正确显示项目符号 [英] List bullets not displaying correctly in Internet Explorer

问题描述

我有一个< ol> ，其中有一些< li> 看起来不错，但由于某种原因在IE它看起来像这样：

HTML：

 < ol start =1> 
< li>免费礼品点击这里< / li> 
< li>免费礼品点击这里< / li> 
< li>奖金礼物< / li> 
< / ol> 
  

CSS：

 code> ol {
 list-style：none outside none; 
} 
 li {
 list-style：decimal outside none; 
 margin-left：30px; 
 margin-bottom：12px;任何想法？
     p>感谢，
解决方案
 hasLayout涉及这里的原因是< ol> code>没有正确编号以及一些其他列表异常，你将需要发布更多的CSS列表，所以我们可以看到是否有一个解决方案为您的情况，但同时这里的代码，将重现它
  ol {
 list-style：none outside none; 
 background：＃444; 
 color：#fff; 
} 
 li {
 list-style：decimal outside none; 
 margin-left：30px; 
 margin-bottom：12px; 
 zoom：1; 
} 
  
关键是保持hasLayout关闭 / code>元素，为了做到这一点，你必须使它所以IE不必做任何计数！在这种情况下左边距意味着它必须计算计算宽度 - 所以如果那些项目里面列表是链接，也许你可以从 li 中删除​​左边距，然后在链接中添加内边距？
 
 
 
 
 
 $ b  
 
 
更新：
 
一些问题，有序;列表不可修复，建议的解决方案是将 ol 包装在 div 并应用任何宽度和颜色，以及嵌套元素（如内部链接）的任何高度，以便列表元素本身可以保留默认
 
 
 
 列表部分; 有布局 
 
 
其中一些问题不能
治愈，所以当需要标记
时，最好避免列表
和列表元素上的布局。如果需要
应用一些维度，这是
更好地应用于其他元素：for 
示例可以将宽度应用于
外部包装器，并将高度应用于
每个列表项的内容。
 
 
所以记住这一点，并假设你的列表元素包含链接这里;））
  div {
 width：180px; 
 overflow：hidden; 
 background：＃444; 
 color：#fff; 
} 
 
 ol {
 padding：0 0 0 30px; 
 margin：0; 
} 
 li {
 margin-bottom：12px; 
} 
 
 a {
 background：＃444; 
 color：#fff; 
 text-decoration：none; 
 display：block; 
 line-height：30px; 
} 
 
 a：hover {
 color：＃444; 
 background：#fff; 
} 
  
 
 < div> 
< ol start =1> 
< li>< a href =＃>免费礼品点击此处< / a>< / li& 
< li>< a href =＃>免费礼品点击这里< / a>< / li> 
< li>< a href =＃>奖金礼品< / a>< / li> 
< / ol> 
< / div> 
  
 
I have an <ol> with some <li>'s in it, in FF it looks good, but for some reason in IE it looks like this:



HTML:
 <ol start="1">
   <li>Free gifts click here</li>
   <li>Free gifts click here</li>
   <li>Bonus gifts</li>
 </ol>
CSS:
ol {
    list-style: none outside none;
}
li {
    list-style: decimal outside none;
    margin-left: 30px;
    margin-bottom: 12px;
}
Any idea?

Thanks,
解决方案
hasLayout is involved here somewhere it's the cause of <ol>'s not numbering correctly as well as a few other lists oddities, you will need to post more CSS for the list so we can see if there is a workaround for your case, but meanwhile here's code that will reproduce it
ol {
    list-style: none outside none;
    background: #444;
    color: #fff;
}
li {
    list-style: decimal outside none;
    margin-left: 30px;
    margin-bottom: 12px;
    zoom: 1;
}
the key is to keep hasLayout off the li element, in order to do that you have to make it so IE does not have to do any counting!,  in this case the left margin means it's having to count to calculate the width -  so if those items inside the list are links, perhaps you could remove the left margin from the li and add padding to the links instead?

definitely need more code for the use case though



Update:

some problems with ordered ;lists aren't curable, and the recommended solution is to wrap the ol in a div and apply any widths and colouring to that, and any heights to nested elements (like internal links) so that the list elements themselves can be left to default

See the lists section on; On Having Layout

  
Some of these problems cannot be
  cured, so when the markers are desired
  it's better to avoid layout on lists
  and list elements. If it's necessary
  to apply some dimension, this is
  better applied to other elements: for
  example a width can be applied to an
  external wrapper, and a height to the
  content of each list item.
so bearing this in mind and presuming you list elements do contain links (they do say Click Here ;))
div {
  width: 180px;
  overflow: hidden;
  background: #444;
  color: #fff;
}

ol {
  padding: 0 0 0 30px;
  margin: 0;
}
li {
  margin-bottom: 12px;
}

a { 
  background: #444;
  color: #fff;
  text-decoration:none;
  display: block;
  line-height: 30px;
}

a:hover {
  color: #444; 
  background: #fff;
}
with
<div>
 <ol start="1">
   <li><a href="#">Free Gifts Click Here</a></li>
   <li><a href="#">Free gifts click here</a></li>
   <li><a href="#">Bonus gifts</a></li>
 </ol>
</div>


                        
这篇关于列出在Internet Explorer中无法正确显示项目符号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！