关于在ie6下浮动和宽度的兼容问题。

LoveAPI 2014-09-28 11:40:21

.zhankai{margin-top:-1px;*margin-top:-2px;_margin-top:-1px;border:1px solid #78b5e2;}

.zhankai li{height:24px;background-color:#fff;}

.zhankai li a{display:block;height:24px;padding:0 5px;color:#666;text-decoration:none;line-height:24px;vertical-align:middle;}

.zhankai li a:hover{background-color:#a5defc;}



<div style="float:left;">

    <ul class="zhankai">

      <li><a style="" href="#">苹果苹果苹果苹果苹果苹果苹果苹果苹果苹果</a></li>

      <li><a href="#">梨子</a></li>

      <li><a href="#">葡萄</a></li>

      <li><a href="#">石榴</a></li>

      <li><a href="#">榴莲</a></li>

    </ul>

 </div>

首先，我知道我的代码也许有不合适的地方，请前辈们多多指教，谢谢！
我需要的效果是：
1.选项根据内容撑开宽度；
2.<a>的宽度统一与最长的相等（其实就是为了实现hover效果统一）。

我的代码现在存在的问题是：
1.在ie6下<li>和<a>宽度都超出内容（我加过边框验证，但是不明原因）；
2.在ie7下，<li>和<a>宽度都是根据内容变化，导致效果2无法实现；
3.FF和IE8+都没问题。

然后我尝试过修改：
1.去掉最外层浮动容器<div>，所有子级元素宽度都是100%了；
2.不去掉最外层浮动容器<div>，给所有子级添加浮动后（当然为了保证<li>换行用了"clear:left;"），FF和IE所有版本的效果均同以上问题2。

...全文

350 8 打赏收藏转发到动态举报

写回复

用AI写文章

8 条回复

切换为时间正序

请发表友善的回复…

发表回复

LoveAPI 2014-10-16

打赏
举报

引用 6 楼 qq_21871853 的回复:

你在用的属性后面在写一个属性例如：height:200px;_height：200px; 你在CSS前面加个_号

ie6下这样改，hover效果还是不对。

LoveAPI 2014-10-16

打赏
举报

引用 5 楼 acbv12 的回复:

首先，不要设置ul或li的height，这个属性会导致在IE下的各种格式错乱，你可以设置a元素的高度让li自己适应去吧；其次，a元素的display属性应该设置为inline-block。
.zhankai{margin-top:-1px;*margin-top:-2px;_margin-top:-1px;border:1px solid #78b5e2;}
.zhankai li{/*height:24px;*/background-color:#fff;}
.zhankai li a{display:inline-block;height:24px;padding:0 5px;color:#666;text-decoration:none;line-height:24px;vertical-align:middle;}
.zhankai li a:hover{background-color:#a5defc;}

貌似不行呀，如果这样的话，hover的背景色就只有文字长短了。

qq_21871853 2014-10-11

打赏
举报

你在用的属性后面在写一个属性例如：height:200px;_height：200px; 你在CSS前面加个_号

acbv12 2014-10-11

打赏
举报

首先，不要设置ul或li的height，这个属性会导致在IE下的各种格式错乱，你可以设置a元素的高度让li自己适应去吧；其次，a元素的display属性应该设置为inline-block。


.zhankai{margin-top:-1px;*margin-top:-2px;_margin-top:-1px;border:1px solid #78b5e2;}
.zhankai li{/*height:24px;*/background-color:#fff;}
.zhankai li a{display:inline-block;height:24px;padding:0 5px;color:#666;text-decoration:none;line-height:24px;vertical-align:middle;}
.zhankai li a:hover{background-color:#a5defc;}