topnav ul {

Question

我正在做一场噩梦，一直在尝试这一天，并搜索谷歌没有成功。我有一个向左浮动的小导航，我想让它适用于RTL语言。它在FireFox中运行良好，但IE6根本不显示它。

有人可以告诉我为什么吗？

HTML是默认标记..没有什么花哨的

<div id="topnav">
<ul>
<li><a href="#"><?php print NAV_HOME; ?></a></li>
<?php wp_list_pages('sort_column=menu_order&depth=1&title_li='); ?>
</ul>
</div>


#topnav ul {
    float: left;
    margin: 0 0 0 30px;
}

#topnav li {
    float: right;
    padding: 0;margin:0;
    margin-left: 10px;
    padding-left: 10px;
    background: url(img/topnav_br.png) no-repeat left center;
}

关键是它会浮动到左边，但LI项目将从右到左开始，因为它的RTL语言..但上面的代码在IE6中没有显示任何内容但在FF中有效。

有人请告诉我这里我做错了什么。

谢谢！

Answer 1

你可能被"hasLayout" bug咬了。试试这个：

#topnav ul {
    float: left;
    margin: 0 0 0 30px;
    zoom:1;
}

Answer 2

您没有提供足够的信息。如果您没有指定宽度，IE将默认为可用房间的100％（在其父级内）。

以下代码（带有背景颜色）清晰地显示（在IE6中）列表项在ul内一直向右浮动（实际上在显示窗口30px左侧，左边有一个双边距）。我们不知道您的容器是什么（如果有的话）或您使用的doctype（如果有的话）。我们不知道还有什么是浮动的。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<head>
<title>Float right li test</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
body { margin: 0;
    padding: 0;
}
#topnav ul {
    float: left;
    margin: 0 0 0 30px;
background-color: yellow;
}

#topnav li {
    float: right;
    padding: 0;margin:0;
    margin-left: 10px;
    padding-left: 10px;
background-color: pink;

}
</style>
</head>
<body>
<div id="topnav">
<ul>
<li><a href="#">Selection 1</a></li>
<li><a href="#">Selection 2</a></li>
</ul>
</div>
<p>This is where the page content will go.</p>
</body>
</html>

Answer 3

我在这里看到的一件事将导致IE6中的布局问题是topnav ul上的左边距和浮动。这将使IE6的利润率翻倍。将“display：inline”添加到topnav ul

topnav ul {

float: left;
margin: 0 0 0 30px;
display: inline;

}

Internet Explorer 6不显示我的导航

3 个答案:

topnav ul {