使用font-size：0px 来制作跨浏览器的inline-block cs
网站建设 2023-01-28 20:49www.1681989.com免费网站
像狼蚁网站SEO优化图中的布局，如果排列的元素是登高的话，相信很多人都会使用浮动来布局，不过如果元素不等高的话，不添加多余的标签，浮动布局是很难实现下图中的效果。如果遇到这种情况，可以使用le-block来布局。
现代浏览器的最新版都支持le-block，只有该死的ie6、7不支持le-block，但ie6、7可以通过 displayle；zoom1；来模拟。
狼蚁网站SEO优化是le-block兼容的代码
display:le-block;display:le;zoom:1;width:100px;vertical-align:;
大家有没有发现，在firefox，safari，opera，ie8+中的 le-block 元素之间会莫名其妙多出3px的间距，其实这个是换行符，如果将 le-block 元素间的换行符去掉，这3px的间距就会消失了。
有没有在不影响代码美观的情况下去掉间距尼，答案是有的。可以在le-block的父元素中加上 font-size0；然后在 le-block讲字体设回来。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://.w3./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://.w3./1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
<style type="text/css">
{marg:0;paddg:0;}
body{font:400 12px/1.5 arial,sans-serif}
li,.le-block{display:le-block;width:100px;background:#cdcdcd;font-size:12px;display:le;zoom:1;vertical-align:;}
view sourceprt? .box{marg-:10px;}
.font0{font-size:0;}
</style>
</head>
<body>
<h1>写成一行的 le-block</h1>
<ul>
<li>我是le-block 我是le-block 我是le-block</li><li>我是le-block 我是le-block 我是le-block 我是le-block 我是le-block 我是le-block</li><li>我是le-block 我是le-block 我是le-block</li>
</ul>
<div class="box">
<div class="le-block">我是le-block 我是le-block 我是le-block</div><div class="le-block">我是le-block 我是le-block 我是le-block</div><div class="le-block">我是le-block 我是le-block 我是le-block</div><div class="le-block">我是le-block 我是le-block 我是le-block 我是le-block 我是le-block 我是le-block</div>
<h1>有换行符的 le-block</h1>
<ul>
<li>我是le-block 我是le-block 我是le-block</li>
<li>我是le-block 我是le-block 我是le-block我是le-block 我是le-block 我是le-block</li>
<li>我是le-block 我是le-block 我是le-block</li>
</ul>
<div class="box">
<div class="le-block">我是le-block 我是le-block 我是le-block 我是le-block 我是le-block 我是le-block</div>
<div class="le-block">我是le-block 我是le-block 我是le-block 我是le-block 我是le-block 我是le-block 我是le-block 我是le-block 我是le-block</div>
<div class="le-block">我是le-block 我是le-block 我是le-block</div>
<div class="le-block">我是le-block 我是le-block 我是le-block 我是le-block 我是le-block 我是le-block 我是le-block 我是le-block 我是le-block 我是le-block 我是le-block 我是le-block 我是le-block 我是le-block 我是le-block</div>
</div>
<h1>父级使用了font-size:0的 le-block</h1>
<ul class="font0">
<li>我是le-block 我是le-block 我是le-block</li>
<li>我是le-block 我是le-block 我是le-block我是le-block 我是le-block 我是le-block</li>
<li>我是le-block 我是le-block 我是le-block</li>
</ul>
<div class="box font0">
<div class="le-block">我是le-block 我是le-block 我是le-block 我是le-block 我是le-block 我是le-block</div>
<div class="le-block">我是le-block 我是le-block 我是le-block 我是le-block 我是le-block 我是le-block 我是le-block 我是le-block 我是le-block</div>
<div class="le-block">我是le-block 我是le-block 我是le-block</div>
<div class="le-block">我是le-block 我是le-block 我是le-block 我是le-block 我是le-block 我是le-block 我是le-block 我是le-block 我是le-block 我是le-block 我是le-block 我是le-block 我是le-block 我是le-block 我是le-block</div>
</div>
</body>
</html>
现代浏览器的最新版都支持le-block，只有该死的ie6、7不支持le-block，但ie6、7可以通过 displayle；zoom1；来模拟。
狼蚁网站SEO优化是le-block兼容的代码
复制代码
代码如下:display:le-block;display:le;zoom:1;width:100px;vertical-align:;
大家有没有发现，在firefox，safari，opera，ie8+中的 le-block 元素之间会莫名其妙多出3px的间距，其实这个是换行符，如果将 le-block 元素间的换行符去掉，这3px的间距就会消失了。
有没有在不影响代码美观的情况下去掉间距尼，答案是有的。可以在le-block的父元素中加上 font-size0；然后在 le-block讲字体设回来。
复制代码
代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://.w3./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://.w3./1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
<style type="text/css">
{marg:0;paddg:0;}
body{font:400 12px/1.5 arial,sans-serif}
li,.le-block{display:le-block;width:100px;background:#cdcdcd;font-size:12px;display:le;zoom:1;vertical-align:;}
view sourceprt? .box{marg-:10px;}
.font0{font-size:0;}
</style>
</head>
<body>
<h1>写成一行的 le-block</h1>
<ul>
<li>我是le-block 我是le-block 我是le-block</li><li>我是le-block 我是le-block 我是le-block 我是le-block 我是le-block 我是le-block</li><li>我是le-block 我是le-block 我是le-block</li>
</ul>
<div class="box">
<div class="le-block">我是le-block 我是le-block 我是le-block</div><div class="le-block">我是le-block 我是le-block 我是le-block</div><div class="le-block">我是le-block 我是le-block 我是le-block</div><div class="le-block">我是le-block 我是le-block 我是le-block 我是le-block 我是le-block 我是le-block</div>
<h1>有换行符的 le-block</h1>
<ul>
<li>我是le-block 我是le-block 我是le-block</li>
<li>我是le-block 我是le-block 我是le-block我是le-block 我是le-block 我是le-block</li>
<li>我是le-block 我是le-block 我是le-block</li>
</ul>
<div class="box">
<div class="le-block">我是le-block 我是le-block 我是le-block 我是le-block 我是le-block 我是le-block</div>
<div class="le-block">我是le-block 我是le-block 我是le-block 我是le-block 我是le-block 我是le-block 我是le-block 我是le-block 我是le-block</div>
<div class="le-block">我是le-block 我是le-block 我是le-block</div>
<div class="le-block">我是le-block 我是le-block 我是le-block 我是le-block 我是le-block 我是le-block 我是le-block 我是le-block 我是le-block 我是le-block 我是le-block 我是le-block 我是le-block 我是le-block 我是le-block</div>
</div>
<h1>父级使用了font-size:0的 le-block</h1>
<ul class="font0">
<li>我是le-block 我是le-block 我是le-block</li>
<li>我是le-block 我是le-block 我是le-block我是le-block 我是le-block 我是le-block</li>
<li>我是le-block 我是le-block 我是le-block</li>
</ul>
<div class="box font0">
<div class="le-block">我是le-block 我是le-block 我是le-block 我是le-block 我是le-block 我是le-block</div>
<div class="le-block">我是le-block 我是le-block 我是le-block 我是le-block 我是le-block 我是le-block 我是le-block 我是le-block 我是le-block</div>
<div class="le-block">我是le-block 我是le-block 我是le-block</div>
<div class="le-block">我是le-block 我是le-block 我是le-block 我是le-block 我是le-block 我是le-block 我是le-block 我是le-block 我是le-block 我是le-block 我是le-block 我是le-block 我是le-block 我是le-block 我是le-block</div>
</div>
</body>
</html>
网站设计
- 静宁会SEO的网站建设公司：全面提升您的网络影
- 提升在线业务的关键：选择最佳的丽水网站建设
- 浙江网站优化发展潜力如何
- 井研专业的网站建设公司：打造您的在线品牌
- 灵山SEO网站建设公司：提升您的在线业务表现
- 蒙城网站建设优化公司：提升您网站表现的理想
- 阳谷企业网站优化：提升线上业务力的关键
- 樟树专业的网站建设公司：打造您在线业务的坚
- 通河百度SEO排名的策略与技巧
- 重庆百度快照排名如何进行精准的客户引流
- 重庆百度快照排名
- 常宁便宜的建站公司：助您轻松打造在线业务
- 巫溪百度网站优化：提升网站曝光率与流量的关
- 湖北整站优化怎么做才能放大客户需求
- 闸北网站建设多少钱？全面解析与预算规划
- 辽宁企业网站优化怎么做电话营销