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

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

有兼容问题就要解决，下面总结了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之文字与特殊符号元素结合的浏览器兼容性总结的更多相关文章

前端研究CSS之内联元素块级化/区域大小/文字和图标的位置
做了一天的小按钮基本都是文字+小图标的组合,问题挺多处理的不好,现在总结一下做个了断. //页面结构 <span class="b"> <a href=" ...
css 实现文字自动换行切同行元素高度自适应
1.实现div行内布局所有行跟随最大高度自适应 html代码样例: <div class="row-single"> <div class="colsp ...
CSS实现文字竖排 DIV CSS文字垂直竖列排版显示如何实现？
DIV CSS实现文字竖排排版显示兼容各大浏览器,让文字垂直竖列排版布局. 有时我们需要一段文字进行从上到下竖列排版,我们知道CSS样式中有一样式可以让其竖列排版,但所有浏览器不全兼容,逼不得已放弃. ...
前端基础-- CSS
CSS知识 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染).Css之车更丰富的文档外 ...
CSS实现文本周围插入符号
CSS实现文本周围插入符号的方案本文要讨论的是如何在文本的周围插入图标,怎么样控制它们之间的位置关系,通过HTML结构合理性与CSS属性的使用来比较不同方案所实现效果的优缺点. 常见设计稿要求在文 ...
vue—你必须知道的 js数据类型前端学习 CSS 居中事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记（一） web攻击 web安全之XSS JSONP && CORS css 定位 react小结
vue—你必须知道的目录更多总结猛戳这里属性与方法语法计算属性特殊属性 vue 样式绑定 vue事件处理器表单控件绑定父子组件通信过渡效果 vue经验总结 javascript ...
第十一章前端开发-css
第十一章前端开发-css 1.1.0 css介绍 css是指层叠样式表(Cascading Style Sheets),样式定义如何显示html元素,样式通常又会存在于样式表中. css优势: 内容 ...
前端之CSS初识
figure:last-child { margin-bottom: 0.5rem; } #write ol, #write ul { position: relative; } img { max- ...
Web前端温故知新-CSS基础
一.CSS定义与编写CSS 1.1 CSS的定义全名:Cascading Style Sheets -> 层叠样式表定义:CSS成为层叠样式表,它主要用于设置HTML页面中的文本内容(字体. ...

随机推荐

elasticsearch7.x集群安装（含head、bigdesk、kibana插件）
网址:https://www.elastic.co 192.168.14.239 es-node1192.168.14.240 es-node2192.168.14.241 es-node3 ==== ...
P4357 [CQOI2016]K远点对
题意:给定平面中的 \(n\) 个点,求第 \(K\) 远的点对之间的距离,\(n\leq 1e5,K\leq min(100,\frac{n\times (n-1)}{2})\) 题解:kd-tre ...
(尚013)Vue的生命周期
三个阶段: 一.初始化显示; 二:更新显示三.死亡每一个阶段都对应生命周期的回调函数(也叫勾子函数) 生命周期图示: 1. 2.test013.html <!DOCTYPE html> ...
asp.net之大文件断点续传
ASP.NET上传文件用FileUpLoad就可以,但是对文件夹的操作却不能用FileUpLoad来实现. 下面这个示例便是使用ASP.NET来实现上传文件夹并对文件夹进行压缩以及解压. ASP.NE ...
CODE FESTIVAL 2016 Final 题解
传送门 \(A\) 什么玩意儿-- const char c[]={"snuke"}; char s[15];int n,m; int main(){ scanf("%d ...
2019暑期金华集训 Day6 杂题选讲
自闭集训 Day6 杂题选讲 CF round 469 E 发现一个数不可能取两次,因为1,1不如1,2. 发现不可能选一个数的正负,因为1,-1不如1,-2. hihoCoder挑战赛29 D 设\ ...
《挑战30天C++入门极限》新手入门：C++中堆内存(heap)的概念和操作方法
新手入门:C++中堆内存(heap)的概念和操作方法堆内存是什么呢? 我们知道在c/c++中定义的数组大小必需要事先定义好,他们通常是分配在静态内存空间或者是在栈内存空间内的,但是在实际工作 ...
解释下Http请求头和常见响应状态码
Accept-Charset:指出浏览器可以接受的字符编码.英文浏览器的默认值是ISO-8859-1.ccept:指浏览器或其他客户可以接爱的MIME文件格式.可以根据它判断并返回适当的文件格式. A ...
CSS角度单位：deg、grad、rad、turn
1.deg 度(Degress).一个圆共360度 90deg = 100grad = 0.25turn ≍ 1.570796326794897rad -moz-transform: rotate(2 ...
PHP用strtotime()函数比较两个时间的大小实例详解
在PHP开发中,我们经常会对两个时间的大小进行判断,但是,在PHP中,两个时间是不可以直接进行比较,因为时间是由年.月.日.时.分.秒组成的,所以,如果需要将两个时间进行比较的话,我们首先要做的就是将 ...