IE7不尊重显示：阻止< ul> <李> &LT a取代; [英] IE7 not respecting display: block on <ul> <li> <a>

问题描述

我正在尝试使用以下HTML标记进行简单的垂直导航：

 < ul> 
< li>< a>< / a>< / li> 
< li>< a>< / a>< / li> 
< li>< a>< / a>< / li> 
< / ul> 
  

尽管两者都有 display：block; < li> 和< a> 元素，IE7似乎不尊重包含的全部宽度DIV。在这一个任何想法

的http：//的jsfiddle。 net / 6eKGL /

更新

我现在认为这个问题与 position 容器div的属性以及宽度由< a> 元素。

解决方案

以下是解决IE-7问题的更新小提琴。 http://jsfiddle.net/6eKGL/35/

'p>演示： http://jsfiddle.net/6eKGL/35/embedded/结果

CSS：

  #ajax-search ul li a {
 display：block; 
 / * min-width：150px; * / //删除此规则，IE-7将开始尊重显示块
 padding：9px 18px; 
} 
  

见下面的IE-7截图

I am attempting a simple vertical navigation using the following HTML markup:

<ul>
    <li><a></a></li>
    <li><a></a></li>
    <li><a></a></li>
</ul>

Despite having display: block; on both the <li> and <a> elements, IE7 does not appear to respect the full width of the containing div. Any ideas on this one?

http://jsfiddle.net/6eKGL/

UPDATE

I now believe the issue is related to the position property of the container div and the fact that its width is to be determined by the content inside of the <a> elements.

解决方案

Here is the updated fiddle with IE-7 issue solved. http://jsfiddle.net/6eKGL/35/

Demo: http://jsfiddle.net/6eKGL/35/embedded/result

CSS:

#ajax-search ul li a {
    display: block;
    /*min-width: 150px;*/ // Remove this rule and the IE-7 will start respecting the display block
    padding: 9px 18px;
}

See below screenshot of IE-7

这篇关于IE7不尊重显示：阻止< ul> <李> &LT a取代;的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！