hack

来源:http://www.cnblogs.com/huai-/archive/2016/11/06/6035414.html
-Advertisement-
Play Games

CSS hack的原理 由於不同的瀏覽器和瀏覽器各版本對CSS的支持及解析結果不一樣，以及CSS優先順序對瀏覽器展現效果的影響，我們可以據此針對不同的瀏覽器情景來應用不同的CSS。 CSS hack分類 CSS Hack大致有3種表現形式，CSS屬性首碼法、選擇器首碼法以及IE條件註釋法（即HTML頭 ...


 CSS hack的原理

由於不同的瀏覽器和瀏覽器各版本對CSS的支持及解析結果不一樣，以及CSS優先順序對瀏覽器展現效果的影響，我們可以據此針對不同的瀏覽器情景來應用不同的CSS。  

 CSS hack分類

CSS Hack大致有3種表現形式，CSS屬性首碼法、選擇器首碼法以及IE條件註釋法（即HTML頭部引用if IE）Hack，實際項目中CSS Hack大部分是針對IE瀏覽器不同版本之間的表現差異而引入的。   屬性首碼法(即類內部Hack)：例如 IE6能識別下劃線"_"和星號" * "，IE7能識別星號" * "，但不能識別下劃線"_"，IE6~IE10都認識"\9"，但firefox前述三個都不能認識。   選擇器首碼法(即選擇器Hack)：例如 IE6能識別*html .class{}，IE7能識別*+html .class{}或者*:first-child+html .class{}。   IE條件註釋法(即HTML條件註釋Hack)：針對所有IE(註：IE10+已經不再支持條件註釋)： <!--[if IE]>IE瀏覽器顯示的內容 <![endif]-->，針對IE6及以下版本： <!--[if lt IE 6]>只在IE6-顯示的內容 <![endif]-->。這類Hack不僅對CSS生效，對寫在判斷語句裡面的所有代碼都會生效。   CSS hack書寫順序，一般是將適用範圍廣、被識別能力強的CSS定義在前面。  

CSS hack方式一：條件註釋法

這種方式是IE瀏覽器專有的Hack方式，微軟官方推薦使用的hack方式。舉例如下   只在IE下生效   <!--[if IE]>   這段文字只在IE瀏覽器顯示   <![endif]-->   只在IE6下生效   <!--[if IE 6]>   這段文字只在IE6瀏覽器顯示   <![endif]-->   只在IE6以上版本生效   <!--[if gte IE 6]>   這段文字只在IE6以上(包括)版本IE瀏覽器顯示   <![endif]-->   只在IE8上不生效   <!--[if ! IE 8]>   這段文字在非IE8瀏覽器顯示   <![endif]-->   非IE瀏覽器生效   <!--[if !IE]>   這段文字只在非IE瀏覽器顯示   <![endif]-->

CSS hack方式一：符號首碼

在標準模式中   “-″減號是IE6專有的hack   “\9″ IE6/IE7/IE8/IE9/IE10都生效   “\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack   “\9\0″ 只對IE9/IE10生效，是IE9/10的hack   CSS hack方式三：選擇器首碼法   選擇器首碼法是針對一些頁面表現不一致或者需要特殊對待的瀏覽器，在CSS選擇器前加上一些只有某些特定瀏覽器才能識別的首碼進行hack。   目前最常見的是   *html *首碼只對IE6生效   *+html *+首碼只對IE7生效   @media screen\9{...}只對IE6/7生效   @media \0screen {body { background: red; }}只對IE8有效   @media \0screen\,screen\9{body { background: blue; }}只對IE6/7/8有效   @media screen\0 {body { background: green; }} 只對IE8/9/10有效   @media screen and (min-width:0\0) {body { background: gray; }} 只對IE9/10有效   @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只對IE10有效

CSS3選擇器結合JavaScript的Hack

我們用IE10進行舉例：   由於IE10用戶代理字元串（UserAgent）為：Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)，所以我們可以使用javascript將此屬性添加到文檔標簽中，再運用CSS3基本選擇器匹配。   JavaScript代碼:   var htmlObj = document.documentElement;   htmlObj.setAttribute('data-useragent',navigator.userAgent);   htmlObj.setAttribute('data-platform', navigator.platform );   CSS3匹配代碼：   html[data-useragent*='MSIE 10.0'] #id {color: #F00;}  

Firefox 瀏覽器、Webkit 內核瀏覽器、Opera 瀏覽器css hack

Firefox 瀏覽器css hack   @-moz-document url-prefix() {      .selector { property: value; }    }    支持所有Gecko內核的瀏覽器 (包括Firefox)   *>.selector { property: value; }    Webkit 內核瀏覽器 css hack   @media screen and (-webkit-min-device-pixel-ratio: 0) {      Selector { property: value;  }    }    Opera 瀏覽器css hack   html:first-child>b\ody Selector {property:value;}    @media all and (-webkit-min-device-pixel-ratio:10000),not and all (-webkit-min-device-pixel-ratio:0) { .font1 {color:red;} }   Webkit 內核瀏覽器 css hack和Opera 瀏覽器css hack   @media all and (min-width:0px){ .font1 {color:red;} }   

 移動端開發專用css hack

在android2+的版本中，按鈕邊框會產生bug，需要清除掉，解決方案如下：   a,button,input{-webkit-tap-highlight-color:rgba(255,0,0,0);}/* 1.去除android a/button/input標簽被點擊時產生的邊框 2.去除ios a標簽被點擊時產生的半透明灰色背景 */   利用-webkit-transform-3d屬性，因為Android4.0下不識別該選擇器，瀏覽器解析代碼時，會直接跳過此步驟   在CSS3的相容中，相信大家對使用media的相容並不陌生，我之前也提到過很多次，那麼今天使用的hack也是跟它離不開的，代碼如下：   @media all and (-webkit-transform-3d){/* Android4.0下不識別該-webkit-transform-3d，使用它可做Android4.0下版本相容 */   .css{...}   }
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • jQuery-each()
    (1)$(selector).each(),遍歷函數，選中的標簽中的每一個執行function(I,element),i,是其中標簽的索引（0~selector.length-1）.用於對象,element是指當前對象。 (2)$.each(); 是對數組以及對象集合操作。 如果是數組：var ar ...
  • CSS級聯和繼承
    2016-11-06 《CSS入門經典》第七章 1.在HTML中使用CSS樣式表的三種方式： （1）內聯的樣式表。 eg：<em style="background-white">LIN</em> （2）嵌入式樣式表。 即在<head>標簽內嵌入<style>標簽及具體的樣式設置內容。 （3）外部鏈 ...
  • jQ & html5拖放
    HTML5 拖放 draggable=true draggable=true draggable=true draggable=true draggable=true draggable=true draggable=true draggable=true dragstart 拖放開始的時候觸發 d ...
  • cookie
    Cookie 什麼是cookie? cookie 是存儲於訪問者的電腦中的變數。每當同一臺電腦通過瀏覽器請求某個頁面時，就會發送這個 cookie。你可以使用 JavaScript 來創建和取回 cookie 的值。 什麼是cookie? cookie 是存儲於訪問者的電腦中的變數。每當同一臺 ...
  • 學習Redis你必須瞭解的數據結構——JS實現集合和ECMA6集合
    集合類似於數組，但是集合中的元素是唯一的，沒有重覆值的。就像你學高中數學的概念一樣，集合還可以做很多比如，並集，交集，差集的計算。在ECMA6之前，JavaScript沒有提供原生的Set類，所以只能手動實現，不過手動實現的好處在於，幫助我們瞭解集合的原理。關於Redis集合的應用，你可以移步到這篇 ...
  • jQuery Autocomplete 備忘錄
    之前使用過此 widget，如今再次需要，發現很多東西已經記不起來了，當然之前用的版本也不一樣。 使用之前當然是先認真閱讀官方的說明文檔和示例，這點很重要，而不是東一塊西一點的去網上瞎找資料。Options，Methods，Events 區分的很詳細，參考 jQuery Autocomplete W ...
  • 分頁插件思想：pc載入更多功能和移動端下拉刷新載入數據
    感覺一個人玩lol也沒意思了，玩會手機，看到這個下拉刷新功能就寫了這個demo！ 這個demo寫的比較隨意，咱不能當做插件使用，基本思想是沒問題的，要用就自己封裝吧！ 直接上代碼分析下吧！ 佈局： 就2行，只為實現功能，足矣！ js也不複雜，先定義2個變數，貫穿整個demo，進了不要全局變數，當然， ...
  • 圖片預載入模塊
    前言 在一個應用中，通常會有很多圖片，眾所周知，載入圖片需要時間，在圖片沒有載入出來之前，頁面會是空白，為了提升用戶體驗，應用的開發人員使出渾身解數，其中最為常見的就是在圖片沒有載入完成之前，有一個載入動畫。這裡用到的技術主要是圖片預載入。圖片預載入的原理並不難，當給一個Image對象設置src屬性 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類