解決CSS在瀏覽器不相容的問題
瀏覽器的不相容,大家肯定都是深惡痛絕的,往往我們只是去做修補,卻忘了更重要的事情,那就是追溯根源,避免類似的不相容再次出現。
在下不才,歸納幾點html編碼要素,望能指點各位:
1.文字本身的大小不相容。同樣是font-size:14px的宋體文字,在不同瀏覽器下佔的空間是不一樣的,ie下實際佔高16px,下留白3px,ff下實際佔高17px,上留白1px,下留白3px,opera下就更不一樣了。解決方案:為文字設定 line-height 。確保所有文字都有預設的 line-height 值。這點很重要,在高度上我們不能容忍1px 的差異。
2.ff下容器高度限定,也就是容器定義了height之後,容器邊框的外形就確定了,不會被內容撐大,而ie下是會被內容撐大,高度限定失效。所以不要輕易給容器定義height。
3.也討論內容撐破容器問題,橫向上的。若float 容器未定義寬度,ff下內容會盡量撐開容器寬度,ie下則會優先考慮內容折行。故,內容可能撐破的浮動容器需要定義width。
小實驗:有興趣大家可以看看這段實驗。在不同瀏覽器下分別測試以下各項程式碼。
a.
c. d. d.
上面的程式碼在不同瀏覽器中是不一樣的,實驗起源於對小height 值p 的運用,,小height 值要配合overflow:hidden一起使用。實驗好玩而已,想說明的是,瀏覽器對容器的邊界解釋是大不相同的,容器內容的影響結果各不相同。
4.浮動的清除,ff下不清除浮動是不行的。
修正大家一個迷思,遇到不相容就說ff爛是不對的,其實更多時候是ie的奇怪表現讓我們無所適從。以下列出ie6的種種劣質。
5.最被痛恨的,double-margin bug。 ie6下為浮動容器定義margin-left 或margin-right 實際效果是數值的2倍。解決方案,為浮動容器定義display:inline。
6.mirrormargin bug,當外層元素內有float元素時,外層元素如定義margin-top:14px,會自動產生margin-bottom:14px。 padding也會出現類似問題,都是ie6下的特產,這類bug 出現的情況較為複雜,遠不止於此出現條件,還沒系統整理。解:外層元素設定border 或 設定float。
引申:ff 和ie 下對容器的margin-bottom,padding-bottom的解釋有時不一致,似乎與之相關。
7.吞吃現象,限於篇幅,我就不展開了。還是ie6,上下兩個p,上面的p設定背景,卻發現下面沒有設定背景的p 也有了背景,這就是吞吃現象。對應上面的背景吞吃現象,還有滾動下邊框缺失的現象。解決方案:使用zoom:1。這個zoom好像是專門為解決ie6 bug而生的。
8.註解也能產生bug~~~「多出來的一隻豬。」這是前人總結這個bug使用的文案,ie6的這個bug 下,大家會在頁面看到豬字出現兩遍,重複的內容量因註釋的多寡而改變。解:以「 picRotate start 」方法寫註解。
9.裡加float ,這是一個典型的,棘手的兼容問題,希望引起大家正視,給li 不同的屬性會有不同的解釋效果,ff下的解釋稍可理解,ie6下的解釋會讓你摸不著頭腦,由於問題的複雜性,將另起一文專門討論該問題。在《ul使用心得》一文裡有相關成果,卻沒給出問題解決的過程。
10.使用了「float:left;display:inline」的ul的奇怪表現。可以看出這句css是針對ie6下的double margin bug 而加上的display:inline,這也是我的css體系裡的重要一環,在《ul使用心得》一文中有相關闡述。而這句css用在ul上會讓你痛苦不堪。點到為止,這裡不能多說哈。
以上是解決CSS在瀏覽器不相容的問題的詳細內容。更多資訊請關注PHP中文網其他相關文章!

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

要在UbuntuLinux中刪除FirefoxSnap,可以按照以下步驟進行操作:打開終端機並以管理員身份登入Ubuntu系統。執行以下命令以卸載FirefoxSnap:sudosnapremovefirefox系統將提示你輸入管理員密碼。輸入密碼並按下Enter鍵以確認。等待指令執行完成。一旦完成,FirefoxSnap將被完全刪除。請注意,這將刪除透過Snap套件管理器安裝的Firefox版本。如果你透過其他方式(如APT套件管理器)安裝了另一個版本的Firefox,則不會受到影響。透過上述步驟

mozilla firefox可以卸載;firefox屬於第三方瀏覽器,如果不需要,完全可以卸載。卸載方法:1、在開始功能表中,依序點選「Windwos系統」-「控制台」;2、在「控制台」介面中,點選「程式與功能」;3、在新介面中,找到並雙擊火狐瀏覽器圖示;4、在卸載彈窗中,點選「下一步」;5、點選「卸載」即可。

近日消息,Mozilla在發布Firefox112穩定版的同時,也宣布下個主要版本Firefox113進入Beta頻道,支援AV1動圖、增強密碼產生器和畫中畫特性。火狐瀏覽器Firefox113主要新功能/新特性如下支援AV1格式動圖(AVIS)透過引入特殊字元來增強密碼產生器的安全性增強畫中畫功能,支援後退、顯示影片時間,能更輕鬆地啟用全螢幕模式為Debian和Ubuntu發行版提供官方DEB安裝檔更新書籤導入功能,預設支援導入書籤的圖示在支援的硬體上預設啟用硬體加速AV1視訊解碼使用w

對於爬蟲爬取需要登入的網站,驗證碼或掃碼登入是一個很困擾的問題。 Scrapy是Python中一個非常好用的爬蟲框架,但在處理驗證碼或掃碼登入時,需要採取一些特殊的措施。作為一個常見的瀏覽器,MozillaFirefox提供了一個解決方案,可以幫助我們解決這個問題。 Scrapy的核心模組是twisted,它只支援非同步請求,但有些網站需要使用cookie和

Apple已發布適用於iPhone、iPad、Mac和AppleWatch的更新。儘管每個設備的更新都很小,但它們解決了WebKit漏洞。該公司還保證已經修復了一個錯誤,該錯誤會導致MacBook筆記型電腦意外耗盡電池。 AppleiOS和iPadOS15.3.1是次要更新。它實際上不包含任何主要功能。但是,它對使用點字顯示器的人很有用。此外,該更新還解決了任意程式碼執行漏洞。 iOS15.3.1的更新說明提到:iOS15.3.1為您的iPhone提供了重要的安全更新,並修

Canonical公司近日宣布,在即將發布的Ubuntu23.10中,FirefoxSnap已配置預設在Wayland模式下運作。註:Ubuntu目前已經預設Wayland會話,Firefox也能正常運作。不過目前FirefoxSnap其實是以XWayland相容模式下運行,而不是嚴苛的原生Wayland模式。 Canonical宣布預設會在Wayland模式下運行Firefox瀏覽器,從而在HiDPI顯示器不會出現介面模糊、縮放失真等問題,並且支援拖曳、手勢捏合等觸控手勢。如上所述,Ubunt

1月26日訊息,歐洲地區的iPhone用戶升級iOS17.4Beta1更新之後,打開Safari瀏覽器之後會看到新窗口,支援更換預設瀏覽器。歐洲地區用戶可以根據自己的偏好,設定包括Firefox、Opera、Chrome、Brave和MicrosoftEdge等非Safari瀏覽器了。瀏覽器應用程式現在也可以使用WebKit以外的瀏覽器引擎,包括瀏覽器應用程式和應用程式內的瀏覽體驗。蘋果先前要求包含Chrome瀏覽器和火狐瀏覽器等常用瀏覽器在內,iOS上的所有瀏覽器都必須使用WebKit引擎,今後Chrom

今日最新消息,Mozilla今天正式發布了火狐瀏覽器Firefox115穩定版更新,本次更新最值得關註一點是,這是支援Win7/Win8、macOS10.12、10.13和10.14的最後一個版本。下載網址:https://ftp.mozilla.org/pub/firefox/releases/115.0/Mozilla在官方更新日誌中表示:微軟於2023年1月結束了對Win7和Win8系統的支持,而今天發布的Firefox115版本是上述系統使用者收到的最後一個版本更新。 Win7和Win8用戶
