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

有兼容问题就要解决，下面总结了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. DBUtils框架ResultSetHandler接口学习

    今儿在学习spring框架的时候,让我想起来之前做项目时一直搁置的一个问题,就是DBUtils框架的做数据库操作的使用,当时制作项目的时候就是通过实例打了一遍,由于时间原因也并没有仔细去了解这一方面. ...

  2. .net大文件分块上传断点续传demo

    IE的自带下载功能中没有断点续传功能,要实现断点续传功能,需要用到HTTP协议中鲜为人知的几个响应头和请求头. 一. 两个必要响应头Accept-Ranges.ETag 客户端每次提交下载请求时,服务 ...

  3. learning java Objects.requireNonNull 当传入参数为null时，该方法返回参数本身

    System.out.println(Objects.hashCode(obj)); System.out.println(Objects.toString(obj)); System.out.pri ...

  4. ASM磁盘组的监控

    ASM磁盘组的监控可以使用oracle数据库查询,需要使用到的是sql语句和oracle数据库的相关操作. 还可以使用命令行进行查询,然后用awk进行文本拆分,拿到需要的值.这个需要使用到的是sudo ...

  5. 2019 ACM-ICPC 西安全国邀请赛 E-Tree 树链剖分+线段树

    题意 给一颗带点权的树,三种操作 \(1~s~t\) 修改从1到s的路径上的所有点,\(a[i]=a[i]|t\) \(2~s~t\) 修改从1到s的路径上的所有点,\(a[i]=a[i]\& ...

  6. 数据结构实验之排序一：一趟快排（ SDUT 3398）

    #include <stdio.h> #include <string.h> int a[110000]; void qusort(int l, int r, int a[]) ...

  7. node.js Error: connect EMFILE 或者 getaddrinfo ENOTFOUND

    Error: getaddrinfo ENOTFOUND] code: 'ENOTFOUND', errno: 'ENOTFOUND', syscall: 'getaddrinfo' Error: c ...

  8. FCS省选模拟赛 Day4

    传送门 Solution Code  /* 斯坦纳树:O(n*3^n+kE*2^n) 暂且把O(k*E)当成是spfa的复杂度 15:15~16:20 原题:bzoj_4774 */ #include ...

  9. Bootstrap select 多选并获取选中的值

    代码: <!DOCTYPE html><html> <head>    <meta charset="UTF-8">    < ...

  10. redis主从复制读写分离

    主从复制,读写分离 Master/Slave 是什么 master写入 slave读取 能干嘛 读写分离,更加安全,性能提升 怎么玩 一主二仆.薪火相传.反客为主 周明老师,能够把长篇大论总结的很精辟 ...