Eine vollständige Liste mit Tipps, um Div-CSS mit allen Browsern kompatibel zu machen

 放到  标签下，然后为div指定一个类, 然后CSS这样设计：?#container{ min-width: 600px; width:expression(document.body.clientWidth < 600? "600px": "auto" );}?第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。

6.DIV浮动IE文本产生3象素的bug?左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.?#box{ float:left; width:800px;}?#left{ float:left; width:50%;}?#right{ width:50%;}?*html #left{ margin-right:-3px; //这句是关键}?

?

 

7.IE捉迷藏的问题?当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。?有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。 解决办法：对#layout使用line-height属性 或者给#layout使用固定高和宽。页面结构尽量简单。?

 

8.float的div闭合;清除浮动;自适应高度;?

 

① 例如：<#div id=”floatA” ><#div id=”floatB” ><#div id=” NOTfloatC” >这里的NOTfloatC并不希望继续平移，而是希望往下排。(其中floatA、floatB的属性已经设置为 float:left;)?这段代码在IE中毫无问题，问题出在FF。原因是NOTfloatC并非float标签，必须将float标签闭合。在 <#div class=”floatB”> <#div class=”NOTfloatC”>之间加上 < #div class=”clear”>这个div一定要注意位置，而且必须与两个具有float属性的div同级，之间不能存在嵌套关系，否则会产生异常。 并且将clear这种样式定义为为如下即可： .clear{ clear:both;}?

 

②作为外部 wrapper 的 div 不要定死高度,为了让高度能自动适应，要在wrapper里面加上overflow:hidden; 当包含float的 box的时候，高度自动适应在IE下无效，这时候应该触发IE的layout私有属性(万恶的IE啊！)用zoom:1;可以做到，这样就达到了兼容。?例如某一个wrapper如下定义：?.colwrapper{ overflow:hidden; zoom:1; margin:5px auto;}?

 

③对于排版,我们用得最多的css描述可能就是float:left.有的时候我们需要在n栏的float div后面做一个统一的背景,譬如:?

?比如我们要将page的背景设置成蓝色,以达到所有三栏的背景颜色是蓝色的目的,但是我们会发现随着left center right的向下拉长,而 page居然保存高度不变,问题来了,原因在于page不是float属性,而我们的page由于要居中,不能设置成float,所以我们应该这样解决??再嵌入一个float left而宽度是100%的DIV解决之?

 

④万能float 闭合(非常重要!)?关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup],将以下代码加入Global CSS 中,给需要闭合的div加上class="clearfix" 即可,屡试不爽.?/* Clear Fix */?.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }?.clearfix { display:inline-block; }?/* Hide from IE Mac */?.clearfix {display:block;}?/* End hide from IE Mac */?/* end of clearfix */?或者这样设置：.hackbox{ display:table; //将对象作为块元素级的表格显示}?

 

11.高度不适应?高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用margin 或paddign 时。?例：?#box {background-color:#eee; }?#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }?

?Lösung: Fügen Sie zwei leere div-Objekte über und unter dem P-Objekt hinzu: .1{height:0px;overflow:hidden;} oder fügen Sie das border-Attribut zum DIV hinzu.

12. Warum gibt es Lücken unter den Bildern unter IE6? Es gibt viele Möglichkeiten, diesen Fehler zu beheben, oder das Bild auf display:block zu setzen oder legen Sie das Vertical-Alignment-Attribut fest.

So richten Sie Text und Texteingabefeld vertikal aus. align:middle;

14. Gibt es einen Unterschied zwischen ID und Klasse, die in Webstandards definiert sind? 1. Doppelte IDs sind in Webstandards nicht zulässig „aa“? Zweimaliges Wiederholen ist nicht zulässig, und die Klasse definiert eine Klasse, die theoretisch unendlich oft wiederholt werden kann, sodass Definitionen, die mehrere Referenzen erfordern, eine höhere Priorität haben als die Klasse Beispiel 3 oben. Es ist praktisch für JS. Wenn Sie auf ein Objekt auf der Seite warten möchten, können Sie eine ID dafür definieren. Andernfalls können Sie es nur finden, indem Sie die Seitenelemente durchlaufen und angeben Spezifische Attribute. Dies ist eine relativ große Zeit- und Ressourcenverschwendung als eine ID.

15. Die Methode, den Inhalt in LI mit Ellipsen anzuzeigen, überschreitet die Länge Methode ist für IE- und OP-Browser geeignet

16. Warum kann IE die Farbe der Bildlaufleiste in Webstandards nicht festlegen? Die Lösung besteht darin, den Text durch html ?

FF und IE?

1. Problem mit der Div-Zentrierung? Das Div ist bereits zentriert, wenn „margin-left“ und „margin-right“ auf „Auto“ eingestellt sind. IE muss den Text-Algin zuerst im übergeordneten Element zentrieren bedeutet, dass der Inhalt innerhalb des übergeordneten Elements zentriert ist. ?

2. Der Rand und der Hintergrund des Links (ein Tag)? Der Link fügt eine Rand- und Hintergrundfarbe hinzu um sicherzustellen, dass es keine Zeilenumbrüche gibt. Bezogen auf die Menüleiste dient das Festlegen der Höhe von a und der Menüleiste dazu, eine Verschiebung der Anzeige am unteren Rand zu vermeiden. Wenn die Höhe nicht festgelegt ist, kann ein Leerzeichen in die Menüleiste eingefügt werden.

3. Das Problem, dass der Hover-Stil nicht angezeigt wird, nachdem der Hyperlink angeklickt und aufgerufen wurde, sollte bei vielen Leuten aufgetreten sein Die Lösung besteht darin, die Reihenfolge der CSS-Eigenschaften zu ändern: L-V-H-A Code: /* intLen){?strTemp+=strContent.substr(0,intLen)+" ";?strContent=strContent.substr(intLen,strContent.length);?}?strTemp+=" "+strContent;?obj.innerHTML=strTemp; } if(document.getElementById?&&?!document.all)?toBreakWord("ff", 37); /* ]]> */

 

13.为什么IE6下容器的宽度和FF解释不同呢 

Der Unterschied bei dem Problem besteht darin, ob die Gesamtbreite des Containers die Breite des Rahmens einschließt. Hier interpretiert IE6 es als 220PX. Was genau verursacht das Problem? Wenn Sie die XML oben im Container entfernen, werden Sie feststellen, dass das Problem hier liegt. Die Anweisung oben löst den Qurks-Modus von IE aus. 0 ist out, die richtige CSS-Unterstützung hat neue Probleme. Es gibt mehr Browser und die Kompatibilität von Webseiten wird immer schlechter. Um das Kompatibilitätsproblem von IE7.0 zu lösen, habe ich den folgenden Artikel gefunden: Jetzt verwende ich hauptsächlich !important zum Hacken, für IE6 und Firefox Der Test kann normal angezeigt werden, aber ie7 kann !important korrekt interpretieren, was dazu führt, dass die Seite nicht wie erforderlich angezeigt wird! Das Folgende ist eine Sammlung der Kompatibilität von drei Browsern. Für IE7 & IE6*/?_height:20px; /*Für IE6*/?Achten Sie auf die Reihenfolge. „Dies ist ebenfalls ein CSS-HACK, aber er ist nicht so einfach wie oben.“ ?#example { color: #333; } /* Moz */?* html #example { color: #666; } /* IE6 */?* html #example { color: #999;

? ?????

Die dritte Methode ist der CSS-Filter, der folgende sind Klassiker, die von ausländischen Websites übersetzt wurden. .?Erstellen Sie einen neuen CSS-Stil wie folgt:?#item {?width: 200px;?height: 200px;?background: red;?}?Erstellen Sie ein neues Div und verwenden Sie den zuvor definierten CSS-Stil:?

?Fügen Sie das lang-Attribut hier in der Body-Performance hinzu, das Chinesische ist zh:??Definieren Sie nun einen anderen Stil für das div-Element:?*:lang(en) #item{? background:green !important;?} Es hat auch ie6 .0 erreicht, aber leider unterstützt Safari dieses Attribut nicht, daher müssen Sie den folgenden CSS-Stil hinzufügen: ?#item:empty {?background: green !important?}?:empty Selector ist CSS3-Spezifikation, Obwohl Safari diese Spezifikation nicht unterstützt, wird dieses Element dennoch ausgewählt, unabhängig davon, ob dieses Element existiert, und die grüne Farbe wird jetzt in anderen Browsern als IE-Versionen angezeigt. ?Für die Kompatibilität mit IE6 und FF können Sie das vorherige in Betracht ziehen!Wichtig Persönlich bevorzuge ich die Verwendung von