如何在IE 7中将此选项卡置于水平位置?

时间:2013-07-03 08:02:50

标签: css

图像是在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;
}

1 个答案:

答案 0 :(得分:0)

如果您希望某些内容水平显示内嵌,则首先不应该有clear: both;,因为这会将浮动项目放在新行上。

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

为清楚起见,以下代码将列表项水平内联:

li {
display:inline;
}

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

顺便说一句,我被要求支持IE7用于某些特定用途的项目,但总的来说你可能完全放弃IE7支持。

希望这有帮助。