筆試常考--瀏覽器相容性問題及解決方案(CSS)

来源:https://www.cnblogs.com/dayangge/archive/2018/03/27/8660368.html
-Advertisement-
Play Games

問題一:不同瀏覽器的標簽預設的外補丁和內補丁不同 問題現象:隨便寫幾個標簽,不加樣式控制的情況下,各自的margin 和padding差異較大。 解決方案:css裡加: 1 *{margin:0;padding:0;} 備註:這個是最常見的也是最易解決的一個瀏覽器相容性問題,幾乎所有的css文件開頭 ...


問題一:不同瀏覽器的標簽預設的外補丁和內補丁不同

問題現象:隨便寫幾個標簽,不加樣式控制的情況下,各自的margin 和padding差異較大。

解決方案:css里加:

 1 *{margin:0;padding:0;} 

 

備註:這個是最常見的也是最易解決的一個瀏覽器相容性問題,幾乎所有的css文件開頭都會用通配符*來設置各個標簽的內外補丁是0。

 

問題二:塊屬性標簽float後,又有橫行的margin情況下,在ie6顯示margin比設置的大

 

問題癥狀:常見癥狀是ie6中後面的一塊被頂到下一行。

解決方案:在float的標簽樣式控制中加入 display:inline;將其轉化為行內屬性。

備註:我們最常用的就是div+css佈局了,而div就是一個典型的塊屬性標簽,橫向佈局的時候我們通常都是用div float實現的,橫向的間距設置如果用margin實現,這就是一個必然會碰到的相容性問題。

問題三:設置較小高度標簽(一般小於10px),在ie6,ie7,遨游中高度超出自己設置高度

問題癥狀:ie6、7和遨游里這個標簽的高度不受控制,超出自己設置的高度

解決方案:給超出高度的標簽設置overflow:hidden;或者設置行高line-height 小於你設置的高度。

備註:這種情況一般出現在我們設置小圓角背景的標簽里。出現這個問題的原因是ie8之前的瀏覽器都會給標簽一個最小預設的行高的高度。即使你的標簽是空的,這個標簽的高度還是會達到預設的行高。

問題四:行內屬性標簽,設置display:block後採用float佈局,又有橫行的margin的情況,ie6間距bug(類似第二種)

問題癥狀:ie6里的間距比超過設置的間距

解決方案:在display:block;後面加入display:inline;display:table;

備註:行內屬性標簽,為了設置寬高,我們需要設置display:block;(除了input標簽比較特殊)。在用float佈局並有橫向的margin後,在ie6下,他就具有了塊屬性float後的橫向margin的bug。不過因為它本身就是行內屬性標簽,所以我們再加上display:inline的話,它的高寬就不可設了。這時候我們還需要在display:inline後面加入display:talbe。

問題五:圖片預設有間距

問題癥狀:幾個img標簽放在一起的時候,有些瀏覽器會有預設的間距,加上問題一中提到的通配符也不起作用。

解決方案:使用float屬性為img佈局

備註:因為img標簽是行內屬性標簽,所以只要不超出容器寬度,img標簽都會排在一行里,但是部分瀏覽器的img標簽之間會有個間距。去掉這個間距使用float是正道

問題六:標簽最低高度設置min-height不相容

 

問題癥狀:因為min-height本身就是一個不相容的css屬性,所以設置min-height時不能很好的被各個瀏覽器相容

解決方案:如果我們要設置一個標簽的最小高度200px,需要進行的設置為:

 1 {min-height:200px; height:auto !important; height:200px; overflow:visible;} 

備註:在B/S系統前端開時,有很多情況下我們有這種需求。當內容小於一個值(如300px)時。容器的高度為300px;當內容高度大於這個值時,容器高度被撐高,而不是出現滾動條。這時候我們就會面臨這個相容性問題。

問題七:透明度的相容css設置

方法是:每寫一小段代碼(佈局中的一行或者一塊)我們都要在不同的瀏覽器中看是否相容,當然熟練到一定的程度就沒這麼麻煩了。建議經常會碰到相容性問題的新手使用。很多相容性問題都是因為瀏覽器對標簽的預設屬性解析不同造成的,只要我們稍加設置都能輕鬆地解決這些相容問題。如果我們熟悉標簽的預設屬性的話,就能很好的理解為什麼會出現相容問題以及怎麼去解決這些相容問題。

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 在design包裡面 有一個 BottomSheetDialogFragment 這個Fragment,他已經幫我們處理好了手勢,所以實現起來很簡單。下麵是代碼: ...
  • 網上有很多限制textField輸入長度方法,但是我覺得都不是很完美,準確來說可以說是不符合實際開發的要求,因此在這裡整理一下textField限制輸入長度的方法.我所採用的並不是監聽方法而是最不同的代理實現方法,為什麼不使用監聽呢???當你看到這篇文章很有可能視是為一件事所苦惱那就是使用監聽限制輸 ...
  • Android有很多特別的xml文件,如常用的selector、style以及shape,熟練使用這些xml可以是我們的項目變得更個性化。 一、子標簽(corners、gradient、padding、size、solid、stroke) 1、padding和size 這兩個可以選擇不用,因為它們的 ...
  • 冒泡排序:時間複雜度為O(n^2) 比較任意兩個相鄰的項,如果第一個比第二個大,則交換它們,元素向上移動至正確的順序,就好像氣泡升至錶面上一樣。 冒泡排序是排序演算法中最簡單的,然而,從運行事件的角度來看,冒泡排序是最差的一個, 首先我們來講解一下思路吧: ...
  • Vue.js在設計上使用MVVM模式。通過MVVM的模式拆分為視圖和數據兩部分,並將其分離。因此,你只需關心數據即可,DOM的事情Vue會幫你自動搞定。 Vue的生命周期鉤子比較常用的有: created 實例創建完成之後釣魚,此階段完成了數據的觀測等,但尚未掛載,$el還不可用。在需要初始化處理一 ...
  • 一、生命後期 官網的圖片說明: Vue的生命周期總結 二、數據綁定 1、數據綁定語法 【文本插值】 【HTML屬性】 【綁定表達式】 【過濾器】 【指令】 2、計算屬性(computed) 3、表單控制 【表單控制項】 script部分 需要註意的是sel2val的賦值是int數組,可是在選擇值得時候 ...
  • 基本概念 佈局模型 1. 流動模型(Flow) 2. 浮動模型(Float) 3. 層模型(Layer) 流動模型 預設的網頁佈局模式,流動佈局模型有兩個比較典型的特征: 第一,塊級元素都會在所處的包含元素內自上而下按順序垂直延伸分佈,且預設狀態下,會計元素的寬度都為包含元素寬度的 100% ,即塊 ...
  • 圖形變換。 一、畫一片星空 先畫一片canvas.width寬canvas.height高的黑色星空,再畫200個隨機位置,隨機大小,隨機旋轉角度的星星。 window.onload=function(){ var canvas=document.getElementById("canvas"); ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...