CSS_文字與特殊符號瀏覽器兼容性

時間 2019-11-10

原文原文鏈接

頁面佈局里老是會有相似「文字 | 文字」的設計樣式，不一樣的瀏覽器存在嚴重誤差。css

有兼容問題就要解決，下面總結了3種解決方案，分享給你們：html

一.系統默認的樣式

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.有的換行有的不換行的段落dom

    <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。字體

優勢：完美解決ui

缺點：增長了dom數url

三.解決方法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解決兼容問題。spa

優勢：仍是內聯元素結構沒變

缺點：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>