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

有兼容问题就要解决，下面总结了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. php自定义函数之参数的引用

    在变量这个函数中,我们学习了变量的引用,我们来回顾一下知识:大理石平台支架 <?php $a = 10; $b = &$a; $a = 100; echo $a.'---------'. ...

  2. learning java Runtime 类 获取内存及处理器核数信息

    var rt = Runtime.getRuntime(); System.*)); System.*)); System.*)); System.out.println(rt.availablePr ...

  3. springboot 2.1.6发布

    最新消息: Spring Boot 2.1.6 昨天正式发布了,日常更新一些依赖和修复一些 BUG,没什么硬菜! 重点来了,Spring Boot 1.5 将于今年 8 月结束使命,请尽快迁移到 Sp ...

  4. SpringMVC的请求转发的三种方法

    SpringMVC请求转发的三种方法 首先明白请求转发是一次请求,地址栏不会发生变化,区别于重定向.springmvc环境自行配置. 以下举例中存在如下文件/WEB-INF/pages/success ...

  5. Oracle中查询走索引的情况

    1．对返回的行无任何限定条件,即没有where子句 2．未对数据表与任何索引主列相对应的行限定条件例如:在City-State-Zip列创建了三列复合索引,那么仅对State列限定条件不能使用这个索引 ...

  6. RabbitMQ入门学习系列(六) Exchange的Topic类型

    快速阅读 介绍exchange的topic类型,和Direct类型相似,但是增加了"."和"#"的匹配.比Direct类型灵活 Topic消息类型 特点是:to ...

  7. 深度学习面试题11：池化（same池化、valid池化、带深度的池化）

    目录 Same最大值池化 多深度的same池化 Same平均值池化 Valid池化 参考资料 池化(Pooling)操作与卷积类似,取输入张量的每个位置的矩形领域内的最大值或平均值作为该位置的输出. ...

  8. ASP.NET_微信JS_SDK调用

    using System;using System.Collections.Generic;using System.IO;using System.Linq;using System.Net;usi ...

  9. android x86 安装

    1.下载页面 http://www.android-x86.org 下载了: android-x86-8.1-r2.iso 用Win32DiskImager制作usb启动盘. 参考: https:// ...

  10. 使用FCKeditor编辑器上传文件时中文文件名乱码

    修改:editor\filemanager\browser\default\frmupload.html 文件的编码改为UTF-8 实在不行:fckeditor/editor/filemanager/ ...