css - 如何在 IE 7 中水平放置此选项卡？

Question

图像是在 IE7 中垂直显示的菜单列表项，但我想水平显示它。我正在使用智能向导插件 (framestyle.css)，它在除 IE7 之外的所有其他浏览器中都能完美显示。

framestyle.css:这是智能向导插件的 css。

.swMain ul.anchor {
 position:fixed;
  z-index:1099;
  display:inline;
  float:left;
  list-style: none;
  padding: 0px;  
  margin: 5px 5px 0 0;
}

.swMain ul.anchor li{ 
  position: relative; 
  margin: 0;
  padding: 0; 
  padding-top:3px;
  padding-bottom: 3px;
  clear:both;
  display:inline;
  float: none;  
}

.swMain ul.anchor li a {
  display:block;
  position:relative;
  float:left;
  margin:0;
  padding:3px;
  height:35px;
  width:146px;
  text-decoration: none;
  outline-style:none;
}

IE7.css:这是IE7浏览器菜单列表项的css

.swMain ul.anchor {  
display:inline;
position:relative; 
list-style: none;
padding: 0px 0px 0px 0px;
margin: 10px 0px 0px 10px;
zoom:1;
float:left;
clear:both;
}

.swMain ul.anchor li{
  margin: 0;
  padding: -10px; 
  padding-top:0px;
  padding-bottom: 0px;
  clear:both;
  display:inline;
  float:left;   

}
.swMain ul.anchor li a {
  display:block;
  position:relative; 
   float:left;
  margin:0px 0px 0px 0px;
  padding:3px 3px 3px 3px;
  text-decoration: none;
  outline-style:none;
}

Answer 1

如果您希望某些内容水平内联显示，您不应该首先使用 clear: both;，因为这会将 float 元素放在新的一行上。

您还应该从 IE7 样式表中的 .swMain ul.anchor li 中删除 float: left;。

为清楚起见，以下代码会将您的列表项水平内联:

li {
display:inline;
}

如果你想用一些填充和其他花哨的东西来设计列表项的样式，你可以尝试 inline-block，但这会导致 IE7 出现一些问题。您会找到解决方案 here .

顺便说一句，我被要求为某些特定用途的元素支持 IE7，但通常您很可能完全放弃对 IE7 的支持。

希望这对您有所帮助。