當前位置:編程學習大全網 - 源碼下載 - 我想在谷歌內核瀏覽器裏讓壹個div寬度為100px 在火狐內核瀏覽器設置寬度為50px 這樣可以做到麽

我想在谷歌內核瀏覽器裏讓壹個div寬度為100px 在火狐內核瀏覽器設置寬度為50px 這樣可以做到麽

可以,這個要使用css樣式的hack寫法,目前常見瀏覽器的語法如下:

1、Firefox

@-moz-document url-prefix() { .selector { property: value; } }

上面是僅僅被Firefox瀏覽器識別的寫法,具體如:

@-moz-document url-prefix() { .demo { color:lime; } }

支持Firefox的還有幾種寫法:

/* 支持所有firefox版本 */ #selector[id=selector] { property: value; } 或者: @-moz-document url-prefix() { .selector { property: value; } } /* 支持所有Gecko內核的瀏覽器 (包括Firefox) */ *>.selector { property: value; }

2、Webkit枘核瀏覽器(chrome and safari)

@media screen and (-webkit-min-device-pixel-ratio:0) { Selector { property: value; } }

上面寫法主要是針對Webkit內核的瀏覽器,如Google Chrome 和 Safari瀏覽器:

@media screen and (-webkit-min-device-pixel-ratio:0) { .demo { color: #f36; } }

3、Opera瀏覽器

html:first-child>body Selector {property:value;} 或者: @media all and (min-width:0) { Selector {property: value;} } 或者: @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { head~body Selector { property: value; } }

上面則是Opera瀏覽器的Hack寫法:

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { head~body .demo { background: green; } }

4、IE9瀏覽器

:root Selector {property: value9;}

上面是IE9的寫法,具體應用如下:

:root .demo {color: #ff09;}

5、IE9以及IE9以下版本

Selector {property:value9;}

這種寫法只有IE9以及IE9以下版本能識別,這裏需要註意此處“9”只能是“9”不能是別的,比如說“8”,不然會失去效果的,如:

.demo {background: lime9;}

6、IE8瀏覽器

Selector {property: value/;} 或者: @media ?screen{ Selector {property: value;} }

上面寫法只有IE能識別,如:

.color {color: #fff/;} 或者: @media ?screen{ .color {color: #fff;} }

7、IE8以及IE8以上的版本

Selector {property: value?;}

這種寫法只有IE8以及IE8以上版本支持,如

.demo {color: #ff0?;}

8、IE7瀏覽器

*+html Selector{property:value;} 或 *:first-child+html Selector {property:value;}

上面兩種是IE7瀏覽器下才能識別,如:

*+html .demo {background: green;} 或者: *:first-child+html .demo {background: green;}

9、IE7及IE7以下版本瀏覽器

Selector {*property: value;}

上面的寫法在IE7以及其以下版本都可以識別,如:

.demo {*background: red;}

10、IE6瀏覽器

Selector {_property/**/:/**/value;} 或者: Selector {_property: value;} 或者: *html Selector {property: value;}

具體應用如下:

.demo {_width/**/:/**/100px;} 或者: .demo {_width: 100px;} 或者: *html .demo {width: 100px;}

  • 上一篇:有什麽好看的電影嗎?妳有什麽印象深刻的嗎?,我沒看過的都可以壹試
  • 下一篇:Redis的持久化機制 (RDB&AOF&混合模式)
  • copyright 2024編程學習大全網