關於css相容性問題及一些常見問題彙總

来源:https://www.cnblogs.com/good10000/archive/2019/03/23/10584379.html
-Advertisement-
Play Games

目前主流瀏覽器的相容性做的都比較好了，本文主要針對IE6，7的不相容問題進行解決。 1.圓盤時鐘有浮動存在時，計算一定要精確，不要讓內容的寬高超出我們所設置的寬高，IE6下，內容會撐開設置好的高度。 解決方法：給對應的父級加overflow:hidden;但是會有部分被隱藏掉，最好是精確計算寬高再設 ...


目前主流瀏覽器的相容性做的都比較好了，本文主要針對IE6，7的不相容問題進行解決。

1.圓盤時鐘有浮動存在時，計算一定要精確，不要讓內容的寬高超出我們所設置的寬高，IE6下，內容會撐開設置好的高度。

解決方法：給對應的父級加overflow:hidden;但是會有部分被隱藏掉，最好是精確計算寬高再設定

eg：（ie會撐開）

XML/HTML Code複製內容到剪貼板
  1. <style>  
  2. box{ width:400px;}   
  3. left{ width:200px;height:300px;background:red;float:left;}   
  4. right{ width:200px;float:right;}   
  5. div{width:180px;height:180px;background:blue;padding:15px;}   
  6. *   
  7.    計算一定要精確 不要讓內容的寬高超出我們設置的寬高   
  8.    在IE6下，內容會撐開設置好的寬高   
  9. /   
  10. </style>  
  11. </head>  
  12. <body>  
  13. <div class="box">  
  14.   <div class="left"></div>  
  15.   <div class="right">  
  16.       <div class="div"></div>  
  17.   </div>  
  18. </div>  
  19. </body>  
  20.   

2.圖片旋轉在IE6下有元素浮動時，如果寬度需要由內容撐開，就給裡邊的塊元素都加浮動，正常瀏覽器不用加浮動。

eg：

XML/HTML Code複製內容到剪貼板
  1. <style>  
  2. box{ width:400px;}   
  3. left{background:red;float:left;}   
  4. right{float:right; background:blue;}   
  5.  h3{margin:0;height:30px; float:left;}   
  6.  /*   
  7.      在IE6元素浮動，如果寬度需要內容撐開，就給裡邊的塊元素都加浮動   
  8.  */   
  9.  </style>  
  10. </head>  
  11. <body>  
  12. <div class="box">  
  13.    <div class="left">  
  14.        <h3>左側</h3>  
  15.    </div>  
  16.    <div class="right">  
  17.        <h3>右側</h3>  
  18.    </div>  
  19. </div>  
  20. </body>  


3. 抽獎在IE6下元素的高度的小於19px的時候，會被當做19px來處理

　　解決辦法：添加overflow:hidden;

 

4. 在IE6下border:1px dotted #000;中，dotted不支持，會以虛線的方式的出現。

　　解決方法：切背景平鋪

 

5. 在所有瀏覽器中子元素的margin-top，margin-bottom值會傳遞給父級；

　　解決辦法：

　　　　a：給父級都添加浮動（或者給子級添加浮動也能解決margin-top問題，但是margin左右值會出現雙倍的值，也就是雙邊據bug問題，下麵會講）；

　　　　b：給父級添加position:relative;(或position:absolute;但是會脫離文檔流)

　　　　c：添加display:inline-block; 正常瀏覽器，可行，但是IE,7下，塊元素不支持display:inline-block;

　　　　d: 給附件添加border屬性，例如border:1px solid red; 正常瀏覽器可行，在IE6下必須再給父級添加zoom:1;

eg:

XML/HTML Code複製內容到剪貼板
  1. <style>  
  2. body{margin:0;}   
  3. box{background:blue;border:1px solid #000; zoom:1;}   
  4. div{width:200px;height:200px;background:red;margin:100px;}   
  5.  /*   
  6.      在IE6下解決margin傳遞要觸發haslayout   
  7.         
  8.      在IE6下父級有邊框的時候，子元素的margin值消失   
  9.         
  10.    解決辦法:觸發父級的haslayout   
  11. */   
  12. </style>  
  13. </head>  
  14. <body>  
  15. <div class="box">  
  16.    <div class="div"></div>  
  17. </div>  
  18. </body>  

 

6. css3背景動畫在IE6下，塊元素有浮動和和橫向的margin值 ，橫向的margin值會被放大成兩倍。

解決辦法：添加display:inline;

XML/HTML Code複製內容到剪貼板
  1. <style>  
  2.  .box{ float:left;border:10px solid #000;}   
  3.  .box div{width:100px;height:100px;background:Red;margin-right:20px;border:5px solid #ccc; float:left;}   
  4.  /*   
  5.      margin-right 一行右側第一個元素有雙邊距   
  6.         
  7.      margin-left 一行左側第一個元素有雙邊距   
  8.  */   
  9.  </style>  
  10. </head>  
  11. <body>  
  12. <div class="box">  
  13.     <div>1</div>  
  14.     <div>2</div>  
  15.     <div>3</div>  
  16.     <div>4</div>  
  17. </div>  
  18. </body>  

 

7. 在IE6，7下，li自身沒浮動，但是li的內容有浮動，li下邊就會產生一個間隙

解決辦法：1.給li加浮動
        　2.給li加vertical-align:top;

註意：當IE6下最小高度問題，和 li的間隙問題共存的時候， 給li加浮動才能解決。

eg:

XML/HTML Code複製內容到剪貼板
  1. <style>  
  2. ul{margin:0;padding:0;width:302px;}   
  3. li{ list-style:none;height:30px;border:1px solid #000; vertical-align:top;}   
  4. a{width:100px;float:left;height:30px;background:Red;}   
  5. span{width:100px;float:right;height:30px;background:blue;}   
  6. /*   
  7.     在IE6，7下，li本身沒浮動，但是li的內容有浮動，li下邊就會產生一個間隙   
  8.     解決辦法:   
  9.         1.給li加浮動   
  10.        2.給li加vertical-align   
  11. */   
  12. </style>  
  13. </head>  
  14. <body>  
  15. <ul>  
  16.    <li>  
  17.        <a href="#"></a>  
  18.        <span></span>  
  19.    </li>  
  20.    <li>  
  21.        <a href="#"></a>  
  22.        <span></span>  
  23.    </li>  
  24.    <li>  
  25.        <a href="#"></a>  
  26.        <span></span>  
  27.    </li>  
  28. </ul>  
  29. </body>  
  30.   

8.當一行子元素占有的寬度之和和父級的寬度相差超過3px,或者有不滿行狀態的時候,最後一行子元素的下margin在IE6下就會失效

解決方法：額，還沒發現

eg：

XML/HTML Code複製內容到剪貼板
  1. <style>  
  2. .box{border:10px solid #000;width:600px; /* width:603px; */ overflow:hidden;}   
  3. .box div{width:100px;height:100px;background:Red;margin:20px;border:5px solid #ccc; float:left; display:inline;}   
  4. /*   
  5.     當一行子元素占有的寬度之和和父級的寬度相差超過3px,或者有不滿行狀態的時候,最後一行子元素的下margin在IE6下就會失效   
  6. */   
  7. </style>  
  8. </head>  
  9. <body>  
  10. <div class="box">  
  11.    <div>1</div>  
  12.    <div>2</div>  
  13.    <div>3</div>  
  14.    <div>4</div>  
  15.    <div>1</div>  
  16.    <div>2</div>  
  17.    <div>3</div>  
  18.    <div>4</div>  
  19.    <div>1</div>  
  20.    <div>2</div>  
  21.    <div>3</div>  
  22.    <!-- <div>4</div> -->  
  23. </div>  

 

9. Bootstrap插件在IE6下的文字溢出BUG。即：子元素的寬度和父級的寬度相差小於3px的時候,或者兩個浮動元素中間有註釋或者內嵌元素的時候，IE6下文字溢出

解決辦法:用div把註釋或者內嵌元素用div包起來。

eg：

XML/HTML Code複製內容到剪貼板
  1. <style>  
  2. .box{ width:400px;}   
  3. .left{float:left;}   
  4. .right{width:400px;float:right;}   
  5. </style>  
  6. </head>  
  7. <body>  
  8. <div class="box">  
  9.     <div class="left"></div>  
  10.    <!-- IE6下的文字溢出BUG --><span></span>  
  11.    <div class="right">↓哈哈哈哈哈哈哈哈哈哈</div>  
  12. </div>  
  13. <!--   
  14.    在IE6下的文字溢出BUG   
  15.       
  16.    子元素的寬度和父級的寬度相差小於3px的時候,兩個浮動元素中間有註釋或者內嵌元素   
  17.       
  18.    解決辦法:用div把註釋或者內嵌元素用div包起來       
  19. -->  
  20. </body>  


10. 當浮動元素和絕對定位元素是併列關係的時候，在IE6下絕對定位元素會消失。
    解決辦法: 給定位元素外麵包個div。

eg：

XML/HTML Code複製內容到剪貼板
  1.   
  2. <style>  
  3. .box{ width:200px;height:200px;border:1px solid #000; position:relative;}   
  4. span{width:50px;height:50px;background:yellow; position:absolute;right:-20px;top:0;}   
  5. ul{width:150px;height:150px;background:Red;margin:0 0 0 50px;padding:0; float:left; display:inline;}   
  6. /*   
  7.     當浮動元素和絕對定位元素是併列關係的時候，在IE6下絕對定位元素會消失   
  8.     解決辦法:   
  9.         給定位元素外麵包個div   
  10. */   
  11. </style>  
  12. </head>  
  13. <body>  
  14. <div class="box">  
  15.    <ul></ul>  
  16.    <span></span>  
  17. </div>  

11. 在IE6，7下，子元素有相對定位的話，父級的overflow包不住子元素。

解決辦法: 給父級也加相對定位 position:relative;。

eg：

XML/HTML Code複製內容到剪貼板
  1. <style>  
  2. .box{ width:200px;height:200px;border:1px solid #000; overflow:hidden; /*  position:relative; */ }   
  3. .div{ width:150px;height:300px;background:yellow; position:relative;}   
  4. /*   
  5.     在IE6，7下，子元素有相對定位的話，父級的overflow包不住子元素   
  6.        
  7.     解決辦法: 給父級也加相對定位position:relative;   
  8. */   
  9. </style>  
  10. </head>  
  11. <body>  
  12. <div class="box">  
  13.    <div class="div"></div>  
  14. </div>  
  15. </body>  

12. 在IE6下絕對定位元素的父級寬高是奇數的時候，元素的right值和bottom值會有1px的偏差.

　　解決辦法: 儘量用偶數，還沒發現別的方法。


13. 在IE6下，position：fixed; 是沒有效果的。

　　解決方法：用js來控制吧。。。

 

14. 在IE6，7下輸入類型的表單控制項上下各有1px的間隙。

　　解決辦法：給input加浮動，或者是絕對定位。

15. 在IE6，7下輸入類型的表單控制項加border:none;會發現border還在，

　　 解決辦法: 重置input的背景，如input{background:#fff;}; 或者使用border:0;或border:0 none;


16. 在IE6，7下輸入類型的表單控制項輸入文字的時候，其背景圖片會跟著一塊移動 。

解決辦法: 把背景加給父級。

17. 更簡潔的css清理浮動方式：

CSS Code複製內容到剪貼板
  1. 方法1：   
  2.   
  3. /* 清理浮動 */  
  4. .clearfix:after {   
  5.  visibility:hidden;   
  6.  display:block;   
  7.  font-size:0;   
  8.  content:" ";   
  9.  clear:both;   
  10.  height:0;   
  11. }   
  12. .clearfix {   
  13.  zoom:1;   
  14. }   
  15.   
  16. 方法2：   
  17.   
  18. 在父元素加代碼：overflow:auto; zoom:1;   
  19.   

18. css強制換行與強制不換行：

/* 禁止換行 */      .nowrap{word-break:keep-all;white-space:nowrap;}
/* 強制換行 */      .break{word-break:break-all;}

19. 超鏈接樣式的設置：

a:link {color: #FF0000}               /* 未訪問的鏈接 */
a:visited {color: #00FF00}          /* 已訪問的鏈接 */
a:hover {color: #FF00FF}           /* 滑鼠移動到鏈接上 */
a:active {color: #0000FF}          /* 選定的鏈接 */

格式化標簽的預設樣式;

20. css/js線上壓縮：（有YUI Compressor工具）

http://ganquan.info/yui/?hl=zh-CN 
 

21. 當一行固定寬度，且顯示不下內容，則加省略號：

C# Code複製內容到剪貼板
  1. ｛white-space:nowrap;   
  2.   
  3.    text-overflow:ellipsis; /* for internet explorer */    
  4.   
  5.    overflow:hidden;    
  6.   
  7.    width:190px;    
  8.   
  9.    display:block;    
  10.   
  11.    text-overflow:ellipsis｝   
  12.   
  13. text-overflow:ellipsis（代表三個點的省略號）   


22. 瀏覽器相容性
margin-bottom:40px;         /*ff的屬性*/
margin-bottom:140px\9;    /* IE6/7/8的屬性 */
color:red\0;                       /* IE8支持 */
*margin-bottom:450px;     /*IE6/7的屬性*/
_margin-bottom:450px;     /*IE6/7的屬性*/


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

-Advertisement-
Play Games
更多相關文章
  • 前端筆記知識點整合之JavaScript（六）關於那個讓人頭疼的正則表達式
    一、正則表達式 1.1正則概述和體驗 正則表達式是被用來匹配字元串中的字元組合的模式，常用來做表單驗證。在JavaScript中，正則表達式也是對象，是一種引用類型。 案例：正確輸入一個電話號碼，010-12345678，用戶輸入正確返回“對”，錯誤返回“錯” 字元串的方法： split() 根據匹 ...
  • js預解析
    js解析器：瀏覽器中專門用來讀取js腳本解析和執行步驟： 1）找內容——根據關鍵詞：var function 參數,全部找到之後預解析結束 a = <!--undefined--> 1//所有變數在正式運行之前，都會提前賦值undefined fn = funciong fn(){ console. ...
  • 前端筆記知識點整合之JavaScript（五）關於數組和字元串那點事
    一、數組 1.1數組概念 數組(array)是一個有序的數據集合。說白了，數組就是一組數。數組內部可以存放一個或多個單獨的數據，整體組成數組。 定義數組最簡單的方式：數組字面量。 數組的字面量“[]”。習慣將數組賦值給一個變數。 數組的字面量就是方括弧，這是定義數組最簡單的方式，至於更多創建數組的方 ...
  • jquery點擊回到頂部
    jquery實現點擊回到頂部 ...
  • 簡體繁體轉換
    繁體詞庫封裝好的，直接就對應簡體轉換了 index.html zh.js load.js ...
  • 檢測ip和地區
    獲取當前位置所在省份城市和所用網路IP ...
  • 魔幻般冒泡背景的CSS3按鈕動畫
    這是一款非常有特點的CSS3按鈕，按鈕的背景不是北京圖片，也不是單純的顏色，而是一組魔幻般的冒泡背景動畫。當我們將滑鼠滑過按鈕時，按鈕的冒泡背景動畫就可以展示出來。可以說這款CSS3按鈕的設計風格相當有創意，而且令人驚嘆的是，這些動畫都是用CSS3實現的，並沒有使用JavaScript，非常強大。 ...
  • 基於jquery二維碼生成插件qrcode
    1、首先在頁面中加入jquery庫文件和qrcode插件。 ? 1 2 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.qrcode.min.js" ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 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 ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類