博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
解决IE6-IE7下li上下间距
阅读量:4502 次
发布时间:2019-06-08

本文共 935 字,大约阅读时间需要 3 分钟。

<!DOCTYPE HTML>

<html>
<head>
<title>IE67li底部3pxBUG </title>
<meta http-equiv=”content-type” content=”text/html; charset=gb2312″ />
<style type=”text/css”>
*{margin:0;padding:0;}
ul{list-style:none;}
li{border:1px solid gray;overflow:hidden;width:120px;}
li span{float:left;}
</style>
</head>

<body>

<ul id=”list”>
<li><span>张三</span></li>
<li><span>李四</span></li>
<li><span>王老五</span></li>
<li><span>刘盲六</span></li>
</ul>
</body>
</html>

截图:

IE6|IE7中li底部3px间距BUG-WEB前端开发网

以下是引发此BUG的条件:

必要条件:

li的子元素设置了浮动(例如:本例中的span设置了左浮动)

充要条件:

(IE6/7)li设置了width、height、zoom 之一 (例如:本文中的li设置了width)
(仅IE7)li设置了padding-top、padding-bottom、margin-top、margin-bottom 之一

解决方案:

方案一

#list li设置clear:left|both,这时#list li不能设置width、height、zoom。
方案二
#list li设置float:left,这时#list li可以设置width、height、zoom。
#list li设置clear:left|both,这时#list li不能设置width、height、zoom。
方案三
给li中的span设置vertical-align:top|middle|bottom

li{vertical-align:top/bottom;}

转载于:https://www.cnblogs.com/lilycode/p/3682685.html

你可能感兴趣的文章
【转载】通过搜狗站长平台提交网站域名变更后的文章地址
查看>>
【转载】Visual Studio2017中如何设置解决方案中的某个项目为启动项目
查看>>
Axios跨域实例
查看>>
ubuntu下安装pyaudio
查看>>
单片机 电子电路 嵌入式 毕设 课设 私活 代做
查看>>
notepad++ 安装 hex_editor 十六进制查看插件
查看>>
正则表达式
查看>>
Date类
查看>>
基本类型的数值转换
查看>>
集合、泛型、增强for
查看>>
Public Key Retrieval is not allowed错误
查看>>
Unable to load authentication plugin 'caching_sha2_password'.错误
查看>>
The server time zone value '乱码' 错误
查看>>
require.js的用法
查看>>
基础语言知识C++
查看>>
如何使电脑彻底崩溃!!!!(不要干坏事哦)
查看>>
简单练习题
查看>>
《A First Course in Probability》-chaper7-极限定理-强大数定理
查看>>
Android基于TrafficStats实现流量实时监测
查看>>
第3周实践项目7 删除链表元素最大值
查看>>