總結（二）

時間 2019-11-19

標籤總結简体版

原文原文鏈接

1.readonly

(1)readonly 屬性規定輸入字段爲只讀

(2)只讀字段是不能修改的。但用戶仍然可使用 tab 鍵切換到該字段，還能夠選中或拷貝其文本。

(3)能夠防止用戶對值進行修改

2.html 屬性

<html xmlns:wb="http://open.weibo.com/wb" class="no-js" lang="zh">

dir:規定元素內容的文本方向。
lang:規定元素內容的語言。
xmlns: 微博關注按鈕須要增長 XML命名空間
class: no-js 是配合Modernizr 一塊兒使用的類名

Modernizr 是一個 javascript 庫，檢查你的遊覽器是否支持 CSS3 或者 HTML5 的特性而自動添加一些類名（class）到 <html> 並替換掉原來的 .no-jsjavascript

簡單來講，Modernizr 就是一個CSS3/HTML5 的測試器，你須要測試什麼，這能夠到它的官方網站配置，選擇本身須要測試的元素。css

還有讓你的遊覽器支持 HTML5 中的新的標籤官方網站官方網站html

關於Moderniz 的具體使用方法和解釋，請參照大神的文章：html5

關於Modernizrjava

3.meta

<meta http-equiv="x-ua-compatible" content="ie=edge">

X-UA-Compatible是自從IE8新加的一個設置，對於IE8如下的瀏覽器是不識別的。經過在meta中設置X-UA-Compatible的值，能夠指定網頁的兼容性模式設置。css3

在網頁中指定的模式優先權高於服務器中(經過HTTP Header)所指定的模式。兼容性模式設置優先級：web

meta tag > http header

IE=EDGE瀏覽器

對IE使用最高模式渲染服務器

即會強制瀏覽器按照最新的標準去渲染。就像在Google’s CDN使用最新版本的JQuery同樣，這是按照最新版本，但也可能因爲沒有固定的版本而破壞你的佈局。app

<meta name="msapplication-config" content="browserconfig.xml" />

Windows-8 / MSIE-11引入了Tiles，由於這樣的服務器管理員可能已經開始在其服務器日誌中看到HTTP 404錯誤，由於它試圖在網站域的根目錄中查找「browserconfig.xml」文件。

4.解決css hack

條件註釋法

<!--[if lt IE 9]>
   這段文字只在版本小於IE9瀏覽器顯示
  <![endif]-->

注：IE10+已經再也不支持條件註釋)

屬性前綴法

// IE6~7爲紅色，其餘爲藍色
div{
  width:500px;
  height:500px;
  color:blue;
  *color:red;
}

IE6~IE10都認識"\9"，但firefox前述三個都不能認識。

選擇器前綴法

IE6能識別*html.class{}
IE7能識別*+html.class{} 或者 *:first-child+html .class{}。

使用兼容工具

html5shiv.js

在IE6~8（不支持html5標籤）上模擬html5標籤

respond.js

在IE6~8（不支持css3）上模擬CSS3 Media Queries

CSS Reset和Normalize.css

在默認的HTML元素樣式上提供了跨瀏覽器的高度一致性。

Modernizr.js

他會爲瀏覽器的html標籤生成一批的css的class名稱，標記當前瀏覽器支持和不支持的特性。咱們利用html標籤上的類名，就能夠爲不一樣版本的不一樣瀏覽器添加兼容樣式

參考：

查詢屬性兼容性

史上最全的CSS hack方式一覽

4.IE8 下的css3

(1) transform

咱們都知道，transform是css3推出的變形屬性，包括斜切、平移、縮放、旋轉等，配合css3的動畫，能夠作出不少炫酷的效果。

但會有公司項目要求讓transform兼容到IE8瀏覽器。明顯的，IE8是不支持css3的，可是IE瀏覽器都一個filter濾鏡，能夠實現相似的效果。

使用矩陣變形 Matrix

transform: rotate(40deg);
 -o-transform: rotate(40deg);
 -webkit-transform: rotate(40deg);
 -moz-transform: rotate(40deg);
 filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7660444431189777, M12=-0.6427876096865394, M21=0.6427876096865398, M22=0.7660444431189779)}

參考：關於矩陣

(2) background

一樣利用filter濾鏡

background: rgba(0, 0, 0, .5);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#88000000,endColorstr=#88000000);

background: url('img/aa.png') no-repeat;
background: none\9;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.img/aa.png',sizingMethod='scale');
background-size: 34px 34px;
-moz-background-size: 34px 34px;
-webkit-background-size: 34px 34px;

擴展：兼容html5 標籤

使用html5.js

<!-- 條件引入html5.js -->
<!--[if lt IE 9]>
    <script src="js/html5.js"></script>
<![endif]-->

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。