前端研究CSS之文字与特殊符号元素结合的浏览器兼容性总结
2014-03-07 15:56
567 查看
页面布局里总是会有类似 “文字 | 文字” 的设计样式,不同的浏览器存在严重偏差。
有兼容问题就要解决,下面总结了3种解决方案,分享给大家:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202008/31/ca83d9bddc8c2ed55d4db216b4a470fc.gif)
1.元素换行的段落
2.编写在一行的段落
3.有的换行有的不换行的段落
三段结构完全一样,只是书写格式不同的代码,在浏览器里的显示就已经开始不一样了。
![](https://oscdn.geek-share.com/Uploads/Images/Content/202008/31/3b2a337e743057185778ef25b8da35c4.gif)
给元素添加li的父元素inlie-block,给ul设置font-size:0。
优点:完美解决
缺点:增加了dom数
![](https://oscdn.geek-share.com/Uploads/Images/Content/202008/31/4ba86fcb85aaafb7cb7aa76cca38b2b2.gif)
给em设置字体,通过hark解决兼容问题。
优点:还是内联元素 结构没变
缺点:css hark需要调试
![](https://oscdn.geek-share.com/Uploads/Images/Content/202008/31/daa8fa9550fbd21af2f4ef040810a765.gif)
优点:减少了dom数 元素还是内联
缺点:制作ico图标 浏览器兼容调试
![](https://oscdn.geek-share.com/Uploads/Images/Content/202008/31/a3c93c55c8471e00bf3d2ef71208893f.gif)
2.如果我们不给内联的父元素设置字体为0,页面就会产生间隙,请看下图:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202008/31/efe236a0ac670d96ba3028aa7ca7a873.gif)
我个人更喜欢添加背景图的方法,虽然需要hack,但是想想一个5屏的页面有可能减少上百个dom数。
个人排序: 解决方法3 > 解决方法1 > 解决方法2
有兼容问题就要解决,下面总结了3种解决方案,分享给大家:
一.系统默认的样式
![](https://oscdn.geek-share.com/Uploads/Images/Content/202008/31/ca83d9bddc8c2ed55d4db216b4a470fc.gif)
1.元素换行的段落
<div class="txt"> <a href="">文字链接</a> <em>|</em> <a href="">文字链接</a> <em>|</em> <a href="">文字链接</a> <em>|</em> <a href="">文字链接</a> <em>|</em> <a href="">文字链接</a> </div>
2.编写在一行的段落
<div class="txt"> <a href="">文字链接</a><em>|</em><a href="">文字链接</a><em>|</em><a href="">文字链接</a><em>|</em><a href="">文字链接</a><em>|</em><a href="">文字链接</a> </div>
3.有的换行有的不换行的段落
<div class="txt"> <a href="">文字链接</a><em>|</em> <a href="">文字链接</a><em>|</em> <a href="">文字链接</a><em>|</em> <a href="">文字链接</a><em>|</em> <a href="">文字链接</a> </div>
三段结构完全一样,只是书写格式不同的代码,在浏览器里的显示就已经开始不一样了。
二.解决方法1(inline-block元素+给符号字体)
![](https://oscdn.geek-share.com/Uploads/Images/Content/202008/31/3b2a337e743057185778ef25b8da35c4.gif)
.box2 .txt{font-size: 0;} .box2 .txt li{font-size: 12px;display: inline-block;*zoom:1;*display: inline;} .box2 .txt .line{padding: 0 2px;font-family: 'Arial'}
<div class="box box2"> <h1>二.解决方法1</h1> <h2>inline-block元素+给符号字体</h2> <ul class="txt"> <li><a href="">文字链接</a></li> <li class="line">|</li> <li><a href="">文字链接</a></li> <li class="line">|</li> <li><a href="">文字链接</a></li> <li class="line">|</li> <li><a href="">文字链接</a></li> <li class="line">|</li> <li><a href="">文字链接</a></li> </ul> </div>
给元素添加li的父元素inlie-block,给ul设置font-size:0。
优点:完美解决
缺点:增加了dom数
三.解决方法2(内联元素+给符号字体+hack)
![](https://oscdn.geek-share.com/Uploads/Images/Content/202008/31/4ba86fcb85aaafb7cb7aa76cca38b2b2.gif)
.box3 .txt em{font-family: 'Arial';*padding-right: 3px;padding:0 3px\0;}
<div class="box box3"> <h1>三.解决方法2</h1> <h2>内联元素+给符号字体+hack</h2> <div class="txt"> <a href="">文字链接</a> <em>|</em> <a href="">文字链接</a> <em>|</em> <a href="">文字链接</a> <em>|</em> <a href="">文字链接</a> <em>|</em> <a href="">文字链接</a> </div> </div>
给em设置字体,通过hark解决兼容问题。
优点:还是内联元素 结构没变
缺点:css hark需要调试
四.解决方法3(内联元素+a元素添加背景+hack)
![](https://oscdn.geek-share.com/Uploads/Images/Content/202008/31/daa8fa9550fbd21af2f4ef040810a765.gif)
.box4 .txt {font-size: 0;} .box4 .txt a{background: url(line.gif) no-repeat right;font-size: 12px;padding:0 6px 0 5px;_padding-left:4px;}
<div class="box box4"> <h1>四.解决方法3</h1> <h2>内联元素+a元素添加背景+hack</h2> <div class="txt"> <a href="">文字链接</a> <a href="">文字链接</a> <a href="">文字链接</a> <a href="">文字链接</a> <a href="">文字链接</a> </div> </div>
优点:减少了dom数 元素还是内联
缺点:制作ico图标 浏览器兼容调试
需要注意的
1.如果我们用em包含特殊符号的时候一定要设置字体,否则IE就会产生下图那样的效果,而且影响到兼容性。![](https://oscdn.geek-share.com/Uploads/Images/Content/202008/31/a3c93c55c8471e00bf3d2ef71208893f.gif)
2.如果我们不给内联的父元素设置字体为0,页面就会产生间隙,请看下图:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202008/31/efe236a0ac670d96ba3028aa7ca7a873.gif)
总结
以上列举了三种方法解决文字与特殊符号元素结合的浏览器兼容问题。我个人更喜欢添加背景图的方法,虽然需要hack,但是想想一个5屏的页面有可能减少上百个dom数。
个人排序: 解决方法3 > 解决方法1 > 解决方法2
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>前端研究CSS之文字与特殊符号元素结合的浏览器兼容性总结</title>
<style>
*{margin: 0;padding: 0;font-size: 12px;line-height: 1;}
h1{font-size: 16px;line-height: 26px;color: red;}
h2{margin-top: 10px;font-size: 14px;}
em{font-style: normal;}
.box{margin-top:20px;border-bottom: 1px dashed #ccc;padding-bottom: 20px;}
.box2 .txt{font-size: 0;}
.box2 .txt li{font-size: 12px;display: inline-block;*zoom:1;*display: inline;}
.box2 .txt .line{padding: 0 2px;font-family: 'Arial'}
.box3 .txt em{font-family: 'Arial';*padding-right: 3px;padding:0 3px\0;}
.box4 .txt {font-size: 0;} .box4 .txt a{background: url(line.gif) no-repeat right;font-size: 12px;padding:0 6px 0 5px;_padding-left:4px;}
</style>
</head>
<body>
<div class="box">
<h1>一.系统默认的样式</h1>
<h2>元素换行的段落</h2>
<div class="txt">
<a href="">文字链接</a>
<em>|</em>
<a href="">文字链接</a>
<em>|</em>
<a href="">文字链接</a>
<em>|</em>
<a href="">文字链接</a>
<em>|</em>
<a href="">文字链接</a>
</div>
<h2>编写在一行的段落</h2>
<div class="txt">
<a href="">文字链接</a><em>|</em><a href="">文字链接</a><em>|</em><a href="">文字链接</a><em>|</em><a href="">文字链接</a><em>|</em><a href="">文字链接</a>
</div>
<h2>有的换行有的不换行的段落</h2>
<div class="txt">
<a href="">文字链接</a><em>|</em>
<a href="">文字链接</a><em>|</em>
<a href="">文字链接</a><em>|</em>
<a href="">文字链接</a><em>|</em>
<a href="">文字链接</a>
</div>
</div>
<div class="box box2"> <h1>二.解决方法1</h1> <h2>inline-block元素+给符号字体</h2> <ul class="txt"> <li><a href="">文字链接</a></li> <li class="line">|</li> <li><a href="">文字链接</a></li> <li class="line">|</li> <li><a href="">文字链接</a></li> <li class="line">|</li> <li><a href="">文字链接</a></li> <li class="line">|</li> <li><a href="">文字链接</a></li> </ul> </div>
<div class="box box3"> <h1>三.解决方法2</h1> <h2>内联元素+给符号字体+hack</h2> <div class="txt"> <a href="">文字链接</a> <em>|</em> <a href="">文字链接</a> <em>|</em> <a href="">文字链接</a> <em>|</em> <a href="">文字链接</a> <em>|</em> <a href="">文字链接</a> </div> </div>
<div class="box box4"> <h1>四.解决方法3</h1> <h2>内联元素+a元素添加背景+hack</h2> <div class="txt"> <a href="">文字链接</a> <a href="">文字链接</a> <a href="">文字链接</a> <a href="">文字链接</a> <a href="">文字链接</a> </div> </div>
</body>
</html>
相关文章推荐
- 前端研究CSS之内联元素块级化/区域大小/文字和图标的位置
- web前端,html+css常用元素,属性总结
- HTML CSS特殊字符总结
- CSS内联元素、块级元素的水平居中和垂直居中方法总结
- javascript和css浏览器兼容性总结
- css利用id和class来控制元素样式技巧总结
- css js 在不同浏览器兼容性问题总结
- linux shell 编程11 特殊符号总结:$0 $1 $2 $# $* $@ $! $$ $?
- 前端总结·基础篇·CSS(一)布局
- 前端 html结合css-1篇
- HTML常用的特殊符号总结 2014年9月12日 22704次浏览 html中经常会用到一些特殊符号,例如箭头,雪花,心形等等,这些符号就不用css样式或者图片来写了,直接用html特殊符号可以实现。
- css前端制作 经验总结
- Web前端开发css基础样式总结
- Web前端学习第十天·fighting_使用CSS美化文字(三)
- 【CSS】前端笔试题总结
- 前端开发面试总结HTML、CSS部分
- 总结一下前端面试题之Html和CSS
- CSS中存在一些比较特殊的属性,伪类,伪元素
- <编写高质量代码--web前端开发修炼之道>之css总结
- CSS浏览器兼容性问题详解总结