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

有兼容问题就要解决，下面总结了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. Postgresql 进程和内存结构

    在本章中,总结了PostgreSQL中的流程体系结构和内存体系结构,以帮助阅读后续章节.如果您已经熟悉它们,可以跳过本章 1.进程结构 Postgresql 是一个C/S架构的关系型数据库,由多个后台 ...

  2. Linux系统性能10条命令

    概述 通过执行以下命令,可以在1分钟内对系统资源使用情况有个大致的了解. uptime dmesg | tail vmstat 1 mpstat -P ALL 1 pidstat 1 iostat - ...

  3. Excel、CSV文件处理

    1.Excel中以\t做为列分隔符,换行符作为行分隔符 使用c#导出excel的时候,当数字太长时,如身份证号,导出后的excel就会显示为科学计数法.如“511122154712121000”会显示 ...

  4. 桥接模式：探索JDBC底层实现

    一.目录概要 二.问题探究 需求:假设要设计一个电脑商场管理系统的某个模块设计,电脑分为品牌和类型两个纬度,我们应该怎么解决? 按照初学者的思路,利用继承就能简单粗暴的实现,那我们来看下这种思路的设计 ...

  5. Processing 字体变形

    在Processing中做字体变形通常需要有以下基础知识: 1.PGraphics对象 2.图片像素化 制作过程也不复杂,代码如下: color ELLIPSE_COLOR = color(0); c ...

  6. Java中的读文件，文件的创建，写文件

    前言 大家好,我是 Vic,今天给大家带来Java中的读文件,文件的创建,写文件的概述,希望你们喜欢 示意图 读文件 public static void read(String path,Strin ...

  7. git revert 让提交不再害怕

    git revert 让提交不再害怕 使用了好多命令, 但对于 git revert 一直不敢怎么使用, 为什么呢? 因为 git merge 的存在. 每次 对于 git merge 的分支, 执行 ...

  8. Python之☞float浮点数精度问题

    Python的浮点数损失精度问题(转) 一个简单的面试题: >>>0.1+0.1+0.1 0.2 >>>0.1+0.1+0.1 0.3000000000000000 ...

  9. getchar与putchar缓冲区以及字符串数组、指针

    getchar与putchar缓冲区 有下面的语句段: while ((s = getchar()) != '\n'){ putchar(s); putchar("\n"); } ...

  10. Centos7变动

    Nmtui:网络配置图形界面 Systemctl:管理systemd的单元 Service:系统服务 Socket:进程间的通信 Busname: Target:多个unit构成的组,运行级别 Sna ...