CSS Browser incompatibility reason analysis and Solutions 1th/2 Page _ Experience Exchange

In the next, summed up a few HTML coding elements, I hope to show you:
1. The size of the text itself is not compatible. The same is the font-size:14px text, in different browsers occupy the space is not the same, ie under the actual account of 16px, under the white 3px,ff under the actual high 17px, left white 1px, under the white 3px,opera under the same. Solution: Set the text to Line-height. Make sure that all text has a default line-height value. This is important and we cannot tolerate 1px differences in height.

2.ff under the height of the container, that is, the container defines the height, the shape of the container border is determined, will not be content to support large, and IE will be the content of the large, high-limit failure. So don't make it easy to define height for the container.

3. Also discusses the contents of the bursting container problem, horizontal. If the float container does not have a defined width, the contents of the FF are as open as possible to the container width, and the content wrapping is preferred under IE. Therefore, the content may burst the floating container needs to define the width.

Small experiment: We are interested to see this experiment. Test the following code separately under different browsers.


A.<div style= "border:1px solid red;height:10px" ></div> b.<div style= "border:1px solid red;width:10px" ></div>

C.<div style= "border:1px solid red;float:left" ></div> d.<div style= "border:1px solid Red;overflow: Hidden "></div>

The above code in different browsers is not the same, the experiment originated from the use of small height value Div, <div style= "Height:10px;overflow:hidden" &GT;&LT;/DIV&GT;, small height Values to be used in conjunction with Overflow:hidden. The experiment is fun, to illustrate, the browser to the container boundary interpretation is very different, the contents of the container affect the results are different.

4. Floating clearance, the FF does not clear the float is not possible.

Correct everyone a misunderstanding, encounter incompatibility said FF Rotten is wrong, in fact, more often is the strange performance of IE let us at a loss. The following are the IE6 of the various misdeeds.

5. The most hated, Double-margin bug. IE6 the floating container is defined margin-left or margin-right the actual effect is twice times the value. Solution to define the display:inline for the floating container.

6.mirrormargin bug, when the outer element has a float element, the outer element, such as defining margin-top:14px, will automatically generate MARGIN-BOTTOM:14PX. Padding will also appear similar problems, are IE6 under the special products, the situation of such bugs is more complex, far more than this one of the conditions, has not been systematically organized. Solution: The outer element is set to border or set float.

Extension: The Margin-bottom,padding-bottom interpretation of containers under FF and IE is sometimes inconsistent and seems to be relevant.

7. The phenomenon of devouring, confined to space, I will not unfold. Or IE6, up and down two Div, the above div set the background, but found that the following does not set the background of the DIV also has a background, this is the devouring phenomenon. Corresponding to the above background devouring phenomenon, there is the phenomenon of scrolling down the border missing. Solution: Use Zoom:1. This zoom seems to be specifically designed to solve IE6 bugs.

8. Annotations can also produce bug~~~ "more than one pig." "This is the previous summary of the use of this bug copy, IE6 this bug, we will see in the page pig word appeared two times, the amount of repeated content due to the number of comments change." Solution: Use "<!–[if!" Ie]> picrotate Start <! [endif]–> "method to write a comment.

9.<li/> Riga float <div/> This is a typical, tricky compatibility issue, hoping to get everyone to face it, give Li different properties will have different interpretations of the effect, the explanation under the FF is slightly understandable, the explanation under the IE6 will make you feel the mind, Due to the complexity of the issue, a separate article will be devoted to the issue. In the "UL use Experience" in the article has related results, but did not give a problem-solving process.

10. Using the "Float:left;display:inline" of the UL's strange performance. Can see this CSS is for IE6 under double margin bug and add display:inline, this is my CSS system is an important link in the "UL use Experience" in the article has related elaboration. And this CSS used in the UL will make you miserable. Donuts, we can't talk more here.

11.img under the white, we look at this code is what the problem:

<div>

</div>

To open the div's border, you find that the bottom of the picture is not close to the bottom of the container, is an img behind the white space character, to eliminate the need to write

<div>
</div>

The last two labels are next to each other. This bug still exists under IE7. Solution: Set Display:block to IMG.

12. Loss of Line-height. <div style= "line-height:20px" > text </div> Unfortunately, the single-line text IE6 effect disappears in line-height ... , because This inline-block element and the inline element are written together. Solution: let img and text float together.

Extension: You know that img align have text-top,middle,absmiddle ah what, you can try to adjust the IMG and text so that they can be consistent under IE and FF, you will find how the tune will not let you satisfied. Simply let img and text are float up, with margin adjustment.

13. Hover status of the link. A:hover img{width:300px} We want to let the mouse hover, the link contains the picture width changes, unfortunately in the IE6 invalid, IE7, FF effective.

14. Non-linked hover status. div:hover{} Such a style IE6 is not recognized, under IE7, FF has effect.

15.block a link, the inner sleeve absolute layer, absolute layer placed Img,ie under, mouse click img will not have link effect, FF, op under normal.

Can not think of, and later thought to add it. Many of the above problems if you have mastered the mystery, 90% of the incompatibility problem does not require another CSS hack.

16. Float that cannot be completely removed. If you let the LI under UL have the Float property, how to clear the floating Li? <ul><li class= "C" ></li></ul> or <ul><li><div>class= "C" ></div> </li></ul> or <ul><li></li><div>class= "C" ></div></ul> or <ul ><li></li></ul><div>class= "C" ></div> or a combination of the above? I can't give the answer to this question. Here is an example of this related

<! DOCTYPE HTML Public-//w3c//dtd XHTML 1.0 transitional//en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd>

<style type=text/css>
. c{clear:both;overflow:hidden;+overflow:visible}
. bd{border:1px Solid Red}

Ul.ex{list-style:none;}
Ul.ex li{float:left;border:1px solid Green;}
</style>
<ul class=ex>
<li>sfsdfsfdf</li>
<li>sfsdfsfdf</li>
</ul>
<div class=c></div>
<div CLASS=BD style=margin-top:19px>sfsdfsfdf</div>

Please test under IE, just change margin-top:19px to margin-top:20px What did you find? Elements: DOCTYPE must have, IE6, IE7 under MARGIN-TOP:19PX also good, margin-top:20px on the problem, unable to explain ... You can also change the clear layer to a different location test.

Solution: Give UL attribute zoom:1 (to Li plus zoom:1 useless)

Extension: The clear layer should be used alone. Maybe you want to save the code to put the clear attribute directly to a content layer below, so there is a problem, not only FF and OP lost the margin effect, ie some margin value will also be invalidated
<div style= "Background:red;float:left;" >dd</div>
<div style= "Clear:both;margin-top:18px;background:green" >ff</div>

17.ie Overflow:hidden is not valid for absolute layer position:absolute or relative layer position:relative under it. Solution: Add position:relative or Position:absolute to Overflow:hidden. In addition, IE6 supports Overflow-x or overflow-y features, IE7, FF does not support.

18.ie6 a serious bug,float element without a defined width, if the inner div defines the height or zoom:1, the DIV will fill a whole line, even if you give the width. The float element should be given a width if it is used as a layout or a complex container.

19.ie6 under the absolute positioning of the div contains a relative positioning of the div, if the inner layer relative positioning of the div height height concrete value, the inner layer relative layer will have a width value of 100%, the outer layer will be large. The solution gives the inner layer a float property relative to the layer.

20.ie6 under the bug,
21. Finally came a disadvantage of ff. width:100% this thing in IE is very convenient, will search the width of the layer upward, ignoring the impact of the floating layer, FF search to the end of the floating layer, so, can only give the middle of all the floating layer plus width:100% just line, tired ah. Opera has learned a good lesson with IE.

