css实现兼容各个浏览器的技巧的代码_经验交流

在编写css样式表的时候常常会碰到一写浏览器兼容的问题，象是不同内核的浏览器显示就不一定相同，不同版本的的浏览器也会产生上下兼容的问题，如何解决这些问题成了我们苦恼的问题，如果你对css hack技术很了解的话，那这就是太简单不过了，不过对于那些不怎么解的人来说可真成了他们所苦恼的事。在这就从 赵磊官方博客 引来一篇文章来介绍兼容各个浏览器的技巧。但是你也不要认为只要是浏览器显示出现差错就事浏览器的问题，也很可能是你的结构不好，建议你好好去学习一下语义结构，毕竟盖房子要先搭钢筋的。 

1,盒解释器的不同解释. 

 代码如下:

#box{ width:600px; //for ie6.0- w\idth:500px; //for ff+ie6.0}
#box{ width:600px!important //for ff width:600px; //for ff+ie6.0 width 
/**/:500px; //for ie6.0-}

2,在ie中隐藏css,使用子选择器 html>body #box{ } 
3,只有ie识别 *html #box{ } 
4,在ie/win有效而ie/max隐藏,使用反斜杠 /*  */ 
#box{ } 
5,给ie单独定义样式 这里更加详细的说明 

6,浮动ie产生的双倍距离 #box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略} 
       这里细说一下block,inline两个元素,Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,...不可控制(内嵌元素); 
#box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的的效果 diplay:table; //for ff,模拟table的效果} 

7,for oprea only @media all and (min-width:0px){/* opera */#box{ }} 
8,IE与宽度和高度的问题 
       IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。 

比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样： #box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;} 
9,页面的最小宽度 
       min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实际上把 width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个

 放到  标签下，然后为div指定一个类：  

Kemudian CSS direka bentuk seperti ini: #container{ min-width: 600px width:expression(document.body.clientWidth Lebar min pertama adalah biasa; tetapi lebar dalam baris kedua menggunakan Javascript, yang hanya dikenali oleh IE, yang juga akan menjadikan dokumen HTML anda kurang formal. Ia sebenarnya melaksanakan lebar minimum melalui penghakiman Javascript. ,

Kaedah yang sama juga boleh digunakan untuk mencapai lebar maksimum untuk IE: #container{min-width: 600px;max-width: 1200px;width:expression(document.body.clientWidth 1200? "1200px" : "auto";}
10, terapung jelas
.hackbox{ display:table; //Paparkan objek sebagai jadual tahap elemen blok} atau .hackbox{ clear:both;}
Atau tambah: selepas (objek pseudo) untuk menetapkan kandungan yang berlaku selepas objek Ia biasanya digunakan bersama dengan kandungan IE tidak menyokong objek pseudo ini dan tidak disokong oleh pelayar Ie, jadi ia tidak menjejaskan pelayar IE/WIN. -------Ini yang paling menyusahkan...

#box:after{ content: "."; paparan: tinggi: 0;
11, teks IE terapung DIV menghasilkan pepijat 3 piksel
Objek di sebelah kiri terapung, dan sebelah kanan diletakkan menggunakan jidar kiri patch luar. Teks dalam objek di sebelah kanan akan berada 3px dari kiri. 800px;}#left{ float:left; width :50%;}#right{ width:50%;}*html #left{ margin-right:-3px;
Kod HTML

12, pemilih atribut (ini tidak serasi, ia adalah pepijat dalam menyembunyikan css) p[id]{}div[id]{}
Ini disembunyikan untuk IE6.0 dan versi di bawah, serta berfungsi dengan FF dan OPera

Masih terdapat perbezaan antara pemilih atribut dan sub-pemilih Skop sub-pemilih dikecilkan dalam bentuk, manakala skop pemilih atribut adalah agak besar, contohnya, dalam p[id], semua tag p mempunyai id. semuanya adalah gaya yang sama

Di atas ialah kod css untuk melaksanakan teknik yang serasi dengan pelbagai pelayar_kandungan pertukaran pengalaman, sila ambil perhatian laman web PHP Cina (www.php .cn)!