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

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

来源：自学PHP网时间：2015-04-14 14:51 作者：阅读:次

[导读] 页面布局里总是会有类似文字 | 文字的设计样式，不同的浏览器存在严重偏差。有兼容问题就要解决，下面总结了3种解决方案，分享给大家：一系统默认的样式1 元素换行的段落复制...

页面布局里总是会有类似 “文字 | 文字” 的设计样式，不同的浏览器存在严重偏差。

有兼容问题就要解决，下面总结了3种解决方案，分享给大家：

一.系统默认的样式

1.元素换行的段落

复制代码

</div>

复制代码

2.编写在一行的段落

</div>

3.有的换行有的不换行的段落

复制代码

</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'}

复制代码

<h2>inline-block元素+给符号字体</h2>

</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;}

复制代码

<h2>内联元素+给符号字体+hack</h2>

</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;}

复制代码

<h2>内联元素+a元素添加背景+hack</h2>

</div>

复制代码

优点：减少了dom数元素还是内联

缺点：制作ico图标浏览器兼容调试

需要注意的

1.如果我们用em包含特殊符号的时候一定要设置字体，否则IE就会产生下图那样的效果，而且影响到兼容性。

2.如果我们不给内联的父元素设置字体为0，页面就会产生间隙，请看下图：

总结

以上列举了三种方法解决文字与特殊符号元素结合的浏览器兼容问题。

我个人更喜欢添加背景图的方法，虽然需要hack，但是想想一个5屏的页面有可能减少上百个dom数。

个人排序：解决方法3 > 解决方法1 > 解决方法2

复制代码

<!DOCTYPE html>

<html>

<head>

<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>

<h1>一.系统默认的样式</h1>

<h2>元素换行的段落</h2>

</div>

<h2>编写在一行的段落</h2>

</div>

<h2>有的换行有的不换行的段落</h2>

</div>

<h2>inline-block元素+给符号字体</h2>

</ul>

</div>

<h2>内联元素+给符号字体+hack</h2>

</div>

<h2>内联元素+a元素添加背景+hack</h2>

</div>

</body>

</html>

CSS BOX 回顾 - html/css语言栏目：html.css - 自学php

纯CSS仿制Google女生节Doodle - html/css语言栏目：ht

子栏目

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

最新评论

添加评论

更多文章推荐

添加评论