首頁 web前端 css教學 解決CSS在瀏覽器不相容的問題

解決CSS在瀏覽器不相容的問題

Aug 14, 2017 pm 03:00 PM
firefox webkit

瀏覽器的不相容,大家肯定都是深惡痛絕的,往往我們只是去做修補,卻忘了更重要的事情,那就是追溯根源,避免類似的不相容再次出現。

在下不才,歸納幾點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.

b.



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中文網其他相關文章!

  • 本網站聲明
    本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

    熱AI工具

    Undresser.AI Undress

    Undresser.AI Undress

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

    AI Clothes Remover

    AI Clothes Remover

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

    Undress AI Tool

    Undress AI Tool

    免費脫衣圖片

    Clothoff.io

    Clothoff.io

    AI脫衣器

    Video Face Swap

    Video Face Swap

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

    熱工具

    記事本++7.3.1

    記事本++7.3.1

    好用且免費的程式碼編輯器

    SublimeText3漢化版

    SublimeText3漢化版

    中文版,非常好用

    禪工作室 13.0.1

    禪工作室 13.0.1

    強大的PHP整合開發環境

    Dreamweaver CS6

    Dreamweaver CS6

    視覺化網頁開發工具

    SublimeText3 Mac版

    SublimeText3 Mac版

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

    熱門話題

    Java教學
    1654
    14
    CakePHP 教程
    1413
    52
    Laravel 教程
    1306
    25
    PHP教程
    1252
    29
    C# 教程
    1225
    24
    Ubuntu Linux如何移除Firefox Snap? Ubuntu Linux如何移除Firefox Snap? Feb 21, 2024 pm 07:00 PM

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

    mozilla firefox可以卸載嗎 mozilla firefox可以卸載嗎 Mar 15, 2023 pm 04:40 PM

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

    火狐瀏覽器Firefox 113 新特性:支援AV1動圖、增強密碼產生器與畫中畫特性 火狐瀏覽器Firefox 113 新特性:支援AV1動圖、增強密碼產生器與畫中畫特性 Mar 05, 2024 pm 05:20 PM

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

    Scrapy中如何使用Mozilla Firefox來解決掃碼登入的問題? Scrapy中如何使用Mozilla Firefox來解決掃碼登入的問題? Jun 22, 2023 pm 09:50 PM

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

    Apple 發布更新以修復 MacBook 中的 WebKit 漏洞和過度耗電 Apple 發布更新以修復 MacBook 中的 WebKit 漏洞和過度耗電 Apr 15, 2023 am 10:49 AM

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

    Ubuntu 23.10預設將在原生 Wayland 模式下執行火狐瀏覽器 Firefox Ubuntu 23.10預設將在原生 Wayland 模式下執行火狐瀏覽器 Firefox Feb 29, 2024 am 10:10 AM

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

    歐洲允許蘋果放鬆瀏覽器限制:可選擇非 WebKit 引擎,Chrome 可作為預設瀏覽器 歐洲允許蘋果放鬆瀏覽器限制:可選擇非 WebKit 引擎,Chrome 可作為預設瀏覽器 Jan 26, 2024 am 10:42 AM

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

    火狐瀏覽器Firefox 115發布,支援Win7/Win8.1的最後一個版本 火狐瀏覽器Firefox 115發布,支援Win7/Win8.1的最後一個版本 Mar 04, 2024 pm 04:46 PM

    今日最新消息,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用戶

    See all articles