當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

CSS_文字与特殊符号浏览器兼容性

發(fā)布時間：2025/3/20 HTML 36 豆豆

生活随笔收集整理的這篇文章主要介紹了 CSS_文字与特殊符号浏览器兼容性小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

2019獨角獸企業(yè)重金招聘Python工程師標準>>>

頁面布局里總是會有類似 “文字 | 文字” 的設計樣式，不同的瀏覽器存在嚴重偏差。

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

一.系統(tǒng)默認的樣式

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.編寫在一行的段落

3.有的換行有的不換行的段落

三段結構完全一樣，只是書寫格式不同的代碼，在瀏覽器里的顯示就已經(jīng)開始不一樣了。

二.解決方法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。

優(yōu)點：完美解決

缺點：增加了dom數(shù)

三.解決方法2(內(nèi)聯(lián)元素+給符號字體+hack)

.box3?.txt?em{font-family:?'Arial';*padding-right:?3px;padding:0?3px\0;}

<div?class="box?box3"><h1>三.解決方法2</h1><h2>內(nèi)聯(lián)元素+給符號字體+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解決兼容問題。

優(yōu)點：還是內(nèi)聯(lián)元素結構沒變

缺點：css hark需要調(diào)試

四.解決方法3(內(nèi)聯(lián)元素+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>內(nèi)聯(lián)元素+a元素添加背景+hack</h2><div?class="txt"><a?href="">文字鏈接</a><a?href="">文字鏈接</a><a?href="">文字鏈接</a><a?href="">文字鏈接</a><a?href="">文字鏈接</a></div></div>

優(yōu)點：減少了dom數(shù) 元素還是內(nèi)聯(lián)

缺點：制作ico圖標瀏覽器兼容調(diào)試

需要注意的

1.如果我們用em包含特殊符號的時候一定要設置字體，否則IE就會產(chǎn)生下圖那樣的效果，而且影響到兼容性。?

2.如果我們不給內(nèi)聯(lián)的父元素設置字體為0，頁面就會產(chǎn)生間隙，請看下圖：

總結

以上列舉了三種方法解決文字與特殊符號元素結合的瀏覽器兼容問題。

我個人更喜歡添加背景圖的方法，雖然需要hack，但是想想一個5屏的頁面有可能減少上百個dom數(shù)。

個人排序：解決方法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>一.系統(tǒng)默認的樣式</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>內(nèi)聯(lián)元素+給符號字體+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>內(nèi)聯(lián)元素+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>

轉載于:https://my.oschina.net/miaowang/blog/207659

總結

以上是生活随笔為你收集整理的CSS_文字与特殊符号浏览器兼容性的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Android 使用自带的HttpCli
下一篇：不要逃避你已经变成了什么样，拥抱他(yo