1.hack
「-″減號是ie6專有的hack
* ie6 、ie7識別
「\9″ ie6/ie7/ie8/ie9/ie10都生效
「\0″ 是ie8的hack
「\9\0″ 是ie9/10的hack
符號 ie6 ie7 ie8 ff
* √ √ × ×
!important × √ × √
_ √ × × ×
\9 × × √ ×
*html √ × × ×
*+html × √ × ×
僅ie5.5可見
僅ie 5.5以上可見
僅ie 5.5以下可見
ie 5.5及以上可見
ie 5.5及以下可見
非ie 5.5的ie可見
2.css3針對瀏覽器的寫法
動畫轉換
例:transform:translate
-webkit-transform:translate /*safari,chrome*/
-ms-transform:translate /* ie */
-o-transform:translate /*opera*/
-moz-transform:translate /*firefox*/
3.自適應:
蘋果4 @media screen and (max-width: 350px)
.time
兩個條件連線中間用and連線。例如:@media screen and (min-width: 350px)and(max-width:500px)
4.針對瀏覽器寫樣式:
@-moz-document url-prefix() }針對火狐寫樣式 hack
例子:@-moz-document url-prefix()}
webkit枘核瀏覽器(chrome and safari)
@media screen and (-webkit-min-device-pixel-ratio:0) }
例子: @media screen and (-webkit-min-device-pixel-ratio:0) }
瀏覽器專用HACK
第乙個hack,ie ff 所有瀏覽器 公用 height 100px 第二個hack ie6專用 height 100px 第三個hack ie6 ie7公用 height 100px height 100px 介紹完了這三個hack了,下面我們再來看看如何在乙個樣式裡分別給乙個屬性定義ie6 i...
寬高自適應 瀏覽器相容
若塊級元素寬度不設定,或者設定成100 都是佔據其父級元素的一整行 應用場景 1 頁面最外層的盒子一般都要佔據螢幕的大小,所以寬度100 2 子元素使用百分比表示盒模型任意部分大小的話,代表的是子元素盒模型任意部分尺寸 父元素寬度百分比 除了高度外,子元素高度 父元素高度百分比 忽略 父元素高度由子...
布局根據瀏覽器大小自適應
最近在寫前端頁面,然後要寫乙個布局自適應,先貼效果圖,我處理的不是很好,見諒。大致的效果就是這樣的。我前端新手小白,記錄一下這種布局方法。然後我就直接貼 了 我這個是vue的,然後html的寫法差不多 parent children v for i in 12 key i children cont...