前端研究CSS之文字与特殊符号元素结合的浏览器

2024/10/01 · admin

页面布局里总是会有类似 “文字 | 文字” 的设计样式，不同的浏览器存在严重偏差。有兼容问题就要解决，下面总结了3种解决方案，分享给大家：一.系统默认的样式 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元素+给符号字体) .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) .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) .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就会产生下图那样的效果，而且影响到兼容性。 2.如果我们不给内联的父元素设置字体为0，页面就会产生间隙，请看下图：总结以上列举了三种方法解决文字与特殊符号元素结合的浏览器兼容问题。我个人更喜欢添加背景图的方法，虽然需要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之文字与特殊符号元素结合的浏览器

相关文章

最新评论

最近发表

网站分类

文章归档