本篇內(nèi)容介紹了“CSS的text-decoration問題怎么解決”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！

山丹網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)！從網(wǎng)頁設計、網(wǎng)站建設、微信開發(fā)、APP開發(fā)、成都響應式網(wǎng)站建設公司等網(wǎng)站項目制作，到程序開發(fā)，運營維護。創(chuàng)新互聯(lián)成立與2013年到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗和運維經(jīng)驗，來保證我們的工作的順利進行。專注于網(wǎng)站建設就選創(chuàng)新互聯(lián)。

項目里遇到的問題

在我的項目里頭遇到的問題如下，一個div里頭包了一個span，我要“除了這個span之外，其他所有的文字都有底線”，通?？吹竭@個問題一定覺得很簡單，只要照下面的CSS寫法一定可以達成：

div{

font-size:20px;

text-decoration: underline;

}

div span{

text-decoration: none;

}

理論上應該前一段會有底線，后一段會沒有底線，但是實際上卻是一條底線通到底…..

不過我不信邪，怕是哪里CSS權(quán)重出了問題，直接加上萬惡的important試試看，結(jié)果發(fā)現(xiàn)結(jié)果還是一模一樣！天呀！是見到鬼了嗎！

div{

font-size:20px;

text-decoration: underline;

}

div span{

text-decoration: none!important;

}

由于實在是太詭異了，必須要查明原因，于是我換個角度思考，來改一下顏色試試看吧！一改才發(fā)現(xiàn)不得了，為什么底線會是紅色的呀？！

div{

font-size:20px;

color:#f00;

text-decoration: underline;

}

div span{

color:#00f;

text-decoration: none!important;

}

text-decoration屬性定義

看到這邊我已經(jīng)大概知道原因了，最有可能的原因應該就是出在text-decoration這個屬性的定義，經(jīng)過一番追根究柢，總算看到W3C的說法，主要是因為text-decoration會把整個父元素加上底線，而整個父元素，當然就包含了子元素，因為同樣顏色的緣故，就以為子元素也被加上底線了，（實際上子元素沒有被加上底線），不過后來又看了這個專門分析兼容性問題的網(wǎng)站說明，其實text-decoration會根據(jù)不同的display屬性，而決定父元素的底線是否延伸，舉例來說吧！如果今天我把span的display改成inline-block，就會得到不同的結(jié)果：

div{

font-size:20px;

color:#f00;

text-decoration: underline;

}

div span{

display:inline-block;

color:#00f;

text-decoration: none!important;

}

小結(jié)

不過由于各家瀏覽器的渲染不同，加上已經(jīng)明白了個中原理，這里就不做太多的測試，只要記得下次如果又遇到這種問題，可能就是父元素和子元素互相干擾所造成，自己也要特別留心。最后，好像也可以利用這種方法，做出莫名其妙的效果…

HTML

<div>

<span><span><span>真是很莫名其妙的效果<span></span></span>

</div>

CSS

div{

font-size:30px;

color:#f00;

text-decoration:overline;

}

div span{

color:#00f;

text-decoration: line-through;

}

div span span{

color:#0f0;

text-decoration: underline;

}

div span span span{

color:#000;

text-decoration: none;

}

“CSS的text-decoration問題怎么解決”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！

文章題目：CSS的text-decoration問題怎么解決
瀏覽路徑：http://aaarwkj.com/article40/igsoho.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導航、搜索引擎優(yōu)化、網(wǎng)站內(nèi)鏈、外貿(mào)網(wǎng)站建設、云服務器、用戶體驗

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)