溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》

常用CSS瀏覽器兼容問(wèn)題怎么解決

發(fā)布時(shí)間：2022-03-11 14:53:19 來(lái)源：億速云 閱讀：114 作者：iii 欄目：web開(kāi)發(fā)

這篇文章主要講解了“常用CSS瀏覽器兼容問(wèn)題怎么解決”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“常用CSS瀏覽器兼容問(wèn)題怎么解決”吧！

一、最后一排筆墨超出跨越DIV邊框

在構(gòu)造中常常泛起最后1排或多排翰墨橫跨DIV邊框體現(xiàn)。

1、HTML殘破源代碼以下：

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS5實(shí)例之透露表現(xiàn)不全或超過(guò)跨過(guò)</title> <style> .CSS5{ border:1px solid #000; width:200px; height:50px;line-height:20px} </style> </head> <body> <div class="CSS5"> 末端一排文字體現(xiàn)不完<br /> 末了一排文字透露表現(xiàn)一半測(cè)試<br /> DIVCSS實(shí)例測(cè)試 </div> </body> </html>

2、css字體文字高出DIV邊框截圖

常用CSS瀏覽器兼容問(wèn)題怎么解決 

3、解析原由以上翰墨字體形式展現(xiàn)越過(guò)DIV典范是高度設(shè)置裝備擺設(shè)謬誤，此盒子高度為50px，css行高為20px,那么三排文字就會(huì)占用60px的高度，而高度卻設(shè)置裝備擺設(shè)為50px，人造高度少了10px，在高版本閱讀器中就會(huì)泛起這類(lèi)模式溢涌征象。

4、設(shè)計(jì)方法操持結(jié)尾一排顯露趕過(guò)標(biāo)題有四種企圖法子： 第一種，將高度計(jì)較好，以上要排版三排模式，而line-height設(shè)置為20px，那末高度就設(shè)置裝備擺設(shè)為3乘以20=60px（最少等于或大于60px）。

第二種，去掉高度height花色，假如不肯定DIV盒子里裝若干好多形式，最簡(jiǎn)單法子也是普片門(mén)徑就是取消對(duì)DIV高度設(shè)置裝備擺設(shè)，何等DIV就會(huì)隨形式幾多增高

第三種，修正line-height高度，假定你CSS機(jī)關(guān)中高度固定，況且顯現(xiàn)內(nèi)容也靜止并想表現(xiàn)完整，就只有批改css line-height的值，這個(gè)案例50除以3=16.6，那么line-height設(shè)置整數(shù)16px就可意圖內(nèi)容溢出固定高度。

第四種，削減內(nèi)容，這里表現(xiàn)的是三排形式，你只有求去掉一排，讓模式只展示兩排即可辦理。

二、收尾一排翰墨字體展現(xiàn)一半

很多時(shí)刻布局中除了以上題目，趕過(guò)DIV的內(nèi)容其實(shí)不溢出而是潛藏不展示，若何貪圖？

1、HTML+CSS實(shí)例代碼

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS5實(shí)例之顯示不全或越過(guò)</title> <style> .CSS5{border:1px solid #000;width:200px;overflow:hidden;height:50px;line-height:20px} </style> </head> <body> <div class="CSS5"> 末端一排筆墨顯現(xiàn)不完<br /> 末了一排筆墨浮現(xiàn)一半測(cè)試<br /> DIVCSS實(shí)例測(cè)試 </div> </body> </html>

2、案例造詣截圖

常用CSS瀏覽器兼容問(wèn)題怎么解決 

3、css布局翰墨展示不全原由綜合以上案例與第一個(gè)溢出DIV盒子代碼相通，只不外多了overflow:hidden格局。此“overflow:hidden”花式具有潛伏DIV超過(guò)跨過(guò)的形式，因而末端一排文字出現(xiàn)展現(xiàn)不全或只透露表現(xiàn)一半。

4、打點(diǎn)方式整治方式可以參考上一個(gè)css兼容標(biāo)題問(wèn)題“最后一排文字越過(guò)DIV邊框”失去很好企圖。 

4-1：減少翰墨行數(shù)（這里減少一行就可） 

4-2：配置高度，高度合計(jì)好 

4-3：不設(shè)置高度 

4-4：高度固定環(huán)境下，合計(jì)修正line-height的值。

感謝各位的閱讀，以上就是“常用CSS瀏覽器兼容問(wèn)題怎么解決”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)常用CSS瀏覽器兼容問(wèn)題怎么解決這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

css
AI
助
手