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

有兼容问题就要解决，下面总结了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. FastCGI sent in stderr: "Primary script unknown" while reading response header from upstream,

    在对nginx添加fastCGI的支持后,然后进行php页面验证,发现页面识别不到,不清楚什么情况,随后google了下,原来是Nginx内置变量问题惹的祸. 1.平台介绍: 1 2 3 4 5 6 ...

  2. loj 3102

    题目大意: 给定 \(m\) 棵无向树\(\left\{T_{1}=\left(V_{1}, E_{1}\right), T_{2}=\left(V_{2}, E_{2}\right), \cdots ...

  3. 28、对多次使用的RDD进行持久化或Checkpoint

    一.图解 二.说明 如果程序中,对某一个RDD,基于它进行了多次transformation或者action操作.那么就非常有必要对其进行持久化操作,以避免对一个RDD反复进行计算. 此外,如果要保证 ...

  4. 《挑战30天C++入门极限》C/C++中结构体(struct)知识点强化

        C/C++中结构体(struct)知识点强化 在上一个教程中我们已经简单的阐述了什么是结构体了,为了进一部的学习结构体这一重要的知识点,我们今天来学习一下链表结构. 结构体可以看做是一种自定义 ...

  5. 模板 - 字符串/数据结构 - 字典树/Trie

    使用静态数组的nxt指针的设计,大概比使用map作为nxt指针的设计要快1倍,但空间花费大概也大1倍.在数据量小的情况下,时间和空间效率都不及map<vector,int>.map< ...

  6. spring boot + vue 前后分离实现登录功能（三）

    Spring boot 后台 github 地址 SpringBoot-book-vue-demo 使用tk.mytabis 简化mybatis 开发 使用 durid 连接池 连接Mysql pom ...

  7. T-MAX组--项目冲刺（第二天）

    THE SECOND DAY 项目相关 作业相关 具体描述 所属班级 2019秋福大软件工程实践Z班 作业要求 团队作业第五次-项目冲刺 作业正文 T-MAX组--项目冲刺(第二天) 团队名称 T-M ...

  8. Software Project Management_JUnit && Maven

    Task1: Develop the project “HelloWorld” -A .java program: Just print out “Hello” + your name; -A tes ...

  9. Communications link failure due to underlying exception: ** BEGIN NESTED EXC

    一是将 wait_timeout=31536000 interactive_timeout=31536000 将过期时间修改为1年. 二是在连接URL上添加参数:&autoReconnect= ...

  10. python中的raise用法

    date ; 2019-08-22 15:10:56 try: s = None if s is None: print("s shi kong de ") raise NameE ...