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

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

  1. 前端研究CSS之内联元素块级化/区域大小/文字和图标的位置

    做了一天的小按钮基本都是文字+小图标的组合,问题挺多处理的不好,现在总结一下做个了断. //页面结构 <span class="b"> <a href=" ...

  2. css 实现文字自动换行切同行元素高度自适应

    1.实现div行内布局所有行跟随最大高度自适应 html代码样例: <div class="row-single"> <div class="colsp ...

  3. CSS实现文字竖排 DIV CSS文字垂直竖列排版显示如何实现？

    DIV CSS实现文字竖排排版显示兼容各大浏览器,让文字垂直竖列排版布局. 有时我们需要一段文字进行从上到下竖列排版,我们知道CSS样式中有一样式可以让其竖列排版,但所有浏览器不全兼容,逼不得已放弃. ...

  4. 前端基础-- CSS

    CSS知识 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染).Css之车更丰富的文档外 ...

  5. CSS实现文本周围插入符号

    CSS实现文本周围插入符号的方案 本文要讨论的是如何在文本的周围插入图标,怎么样控制它们之间的位置关系,通过HTML结构合理性与CSS属性的使用来比较不同方案所实现效果的优缺点. 常见设计稿要求 在文 ...

  6. vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记（一） web攻击 web安全之XSS JSONP && CORS css 定位 react小结

    vue—你必须知道的   目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...

  7. 第十一章 前端开发-css

    第十一章 前端开发-css 1.1.0 css介绍 css是指层叠样式表(Cascading Style Sheets),样式定义如何显示html元素,样式通常又会存在于样式表中. css优势: 内容 ...

  8. 前端之CSS初识

    figure:last-child { margin-bottom: 0.5rem; } #write ol, #write ul { position: relative; } img { max- ...

  9. Web前端温故知新-CSS基础

    一.CSS定义与编写CSS 1.1 CSS的定义 全名:Cascading Style Sheets -> 层叠样式表 定义:CSS成为层叠样式表,它主要用于设置HTML页面中的文本内容(字体. ...

随机推荐

  1. javaweb学习笔记（二）

    一.javaweb学习是所需要的细节 1.Cookie的注意点 ① Cookie一旦创建,它的名称就不能更改,Cookie的值可以为任意值,创建后允许被修改. ② 关于Cookie中的setMaxAg ...

  2. Linux 的磁盘格式化、挂载、磁盘检验、df、du、fdisk、free命令的使用

    df:列出文件系统的整体磁盘使用量du:检查磁盘空间使用量fdisk:用于磁盘分区 free:查看内存占用情况 一.df命令列出系统的整体磁盘使用量 df命令参数功能:检查文件系统的磁盘空间占用情况. ...

  3. 洛谷 P2894 [USACO08FEB]酒店

    题目描述 用线段树维护三个值:区间最长空位长度,从左端点可以延伸的最长空位长度,从右端点可以延伸的最长空位长度. #include<complex> #include<cstdio& ...

  4. 42、JDBC数据源案例

    一.JDBC数据源案例 1.概述 Spark SQL支持使用JDBC从关系型数据库(比如MySQL)中读取数据.读取的数据,依然由DataFrame表示,可以很方便地使用Spark Core提供的各种 ...

  5. 二扩域（GF(2^m)）中的逆矩阵

    通常的逆矩阵可以用高斯消去法计算.十分有效.还可以使用LU分解,QR分解等. 二扩域中的逆矩阵则不同.看似简单,其实有别:它的所有元素定义在GF(2^m)中.从理论来看,似乎也可以用高斯消去法,只是计 ...

  6. (1)Go变量声明、赋值和常量

     先简单了解一下控制台输出,在go中,我们使用fmt包中的函数进行在控制台中打印,一般用以下几个函数      fmt.Print()        #不换行输出      fmt.Printf()  ...

  7. JS-选项卡制作解释部分

    <!DOCTYPE html> <html> <head> <meta name="author" content "郭菊锋,7 ...

  8. hive 属性随笔记录

    set hive.mapred.mode=strict; //设置hive执行模式,默认为nonstrict(非严格模式),这里设置为严格模式 set hiveconf:hive.cli.print. ...

  9. UDF-C_UDMI【转载】

    UDF定义变量的输出 使用宏: C_UDMI( c, thread, index)       自变量类型:cell_t c       Thread *thread       int index ...

  10. kafka集群搭建(图文并用)

    将安装包上传服务器并解压 scp kafka_2.11-1.0.0.tgz username@{ip}:~/. mkdir /usr/local/kafka mv kafka_2.11-1.0.0.t ...