font-size定义为0在IE6下的妙用
发布时间：2013-11-14 15:45:34 作者：佚名 
我要评论
我要评论造成IE6.0下多出来高度的原因是因为没有给div定义字体大小的情况下，默认是font-size;12px所以给font-size定义为0就可以解决问题了
我在做网站项目的时候通常需要定义一个高度为10px以下的div.代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<div style="background:blue; height:8px"></div>
</body>
</html>
意思是定义一个高度为8px,蓝色背景的div.在各浏览起的实际效果如下:
以前我解决IE6.0下出现的这种问题的方法是 加overflow:hidden
<div style="background:blue; height:8px;overflow:hidden"></div>
因为加overflow:hidden有时候会出现很多问题.
我在网上翻阅了一下资料,造成IE6.0下多出来高度的原因是因为:没有给div定义字体大小的情况下,默认是font-size;12px. 所以给font-size定义为0就可以解决问题了.
代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<div style="background:blue; height:8px; font-size:0"></div>
</body>
</html>
在各浏览起的实际效果如下:
复制代码
代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<div style="background:blue; height:8px"></div>
</body>
</html>
意思是定义一个高度为8px,蓝色背景的div.在各浏览起的实际效果如下:
以前我解决IE6.0下出现的这种问题的方法是 加overflow:hidden
复制代码
代码如下:<div style="background:blue; height:8px;overflow:hidden"></div>
因为加overflow:hidden有时候会出现很多问题.
我在网上翻阅了一下资料,造成IE6.0下多出来高度的原因是因为:没有给div定义字体大小的情况下,默认是font-size;12px. 所以给font-size定义为0就可以解决问题了.
代码如下:
复制代码
代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<div style="background:blue; height:8px; font-size:0"></div>
</body>
</html>
在各浏览起的实际效果如下:
相关文章
- css中font的简写方法（包括font-weight，font-size,line-height,font-family） 也就是粗细、大小、行高、字体等等，把它们合在一起写，需要的朋友可以参考下2013-12-12
- css中文字体font-family列表主要是系统自带的一些、装Office会生出来的一些、Windows的一些，感兴趣的朋友可以了解下2013-10-10
- css中的font-weight 属性可以设置文本的，想必大家都对它有所了解了，该属性用于设置显示元素的文本中所用的字体加粗，感兴趣的朋友可以了解下2013-09-16
- CSS font-family字体样式设置属性知识教程篇，CSS font-family-CSS字体样式知识教程。在网页中我们常常对网页中文字设置字体，我们即可使用font-family实现字体样式设置2013-05-02
- font 属性的快捷写法有利于提高书写效率，本文整理了一些，需要了解的朋友可以参考下2012-12-21
- 直接使用中文名称时，在不支持中文的系统或编码的页面就有可能会无法正常显示。如果使用Unicode码的话又不方便记忆2012-05-03
使用font-size：0 来去掉inline-block元素之间的空隙方法
像下面图中的布局，如果排列的元素是等高的话，相信很多人都会使用浮动来布局，不过如果元素不等高的话，不添加多余的标签，浮动布局是很难实现下图中的效果。如果遇到这种2011-08-02使用font-size：0px 来制作跨浏览器的inline-block css属性
像下面图中的布局，如果排列的元素是登高的话，相信很多人都会使用浮动来布局，不过如果元素不等高的话，不添加多余的标签，浮动布局是很难实现下图中的效果。如果遇到这种2011-07-29- CSS可以利用字体属性设置页面中字体的种类、大小、风格、粗细（浓淡）等表现。2011-01-05
- CSS的字体样式设置相信许多人再熟悉不过，其实字体样式的设置并不仅仅限于我们平时常用的那几个属性，本文为您详细叙述 font-size 的字体样式设置的详细属性。2009-08-29
最新评论