Differences and solutions between CSS under IE and FIREFOX Page 1/2_Experience exchange

css is of great value to browser compatibility. usually there are big parsing differences between ie and firefox. here are some compatibility points.
parsing of height
ie: will change according to the height of the content, including image content with undefined height. even if the height is defined, when the content exceeds the height, the actual height will be used
firefox: when the height is not defined, if the content includes image content, mf's height analysis is based on printing standards, which will cause a situation that is inconsistent with the actual content height; when the height is defined, but the content exceeds the height, the content will exceed the definition. height, but the style used in the area will not change, causing style misalignment.
conclusion: it is best to define the height when you can determine the height of the content. if there is really no way to define the height, it is best not to use the border style, otherwise the style will definitely be confused!

analysis of img object alt and title
alt: prompt when the photo does not exist or load error;
title: tip description of the photo.
if title is not defined in ie, alt can also be used as the tip of img, but in mf, both are used according to the definitions in the standard

conclusion: everyone is defining the img object when writing, finally write all the alt and title objects to ensure that they can be used normally in various browsers

other detailed differences
when you are writing css, especially using when arranging pictures with float: left (or right), you will find that it works fine in firefox but has problems in ie. no matter you use margin: 0 or border: 0 to constrain, it will not help.

in fact, there is another problem here, which is ie's handling of spaces. firefox ignores it, but ie handles the spaces between blocks. that is to say, a p should be written immediately after the end of a p, without a carriage return or space in the middle. otherwise, there may be problems, such as a 3px deviation, and the reason is difficult to find.

unfortunately, i encountered such a problem again. multiple img tags were connected, and then defined float: left. i hope these pictures can be connected. but the result is normal in firefox but each img displayed in ie is 3px apart. i removed the spaces between the tags but it didn't work.

the later solution was to wrap li outside img and define margin: 0 for li. this solved the display deviation between ie and firefox. ie's interpretation of some models will produce many errors, and only through repeated attempts can the reasons be discovered.

2. nested div: solution to the problem that the height of the parent div cannot automatically change according to the child div

<div id="parent"> 
<div id="content"> </div> 
</div>

when there is a lot of content, even if the parent sets the height to 100% or auto, the automatic stretching still does not work properly under different browsers. solution

<div id="parent"> 
<div id="content"></div> 
<div style="font: 0px/0px sans-serif;clear: both;display: block"> </div> 
</div>

create a space with a height of 1 at the bottom of the layer to solve this problem

3. css div study notes

1. basically, each block div must have its own id, and blocks with different functions must not use the same id/class.

2. each slightly larger block div followed by marks the beginning and end

3. another way to hide text text-indent: -9999px; line-height: 0

4. handle two parallel columns skillfully:

1)
the right column is p, width=44.5%, float=left
the left column is p.first , border-right: #a7a7a7 1px solid, width=45%
2)
right column #right, margin-left:50%
left column #left, float=left,width= 50% border-right: #a7a7a7 1px solid

the key point of the above two methods is to select one of them as float=left

5. randomly switch pictures:

#random { 
background: url(/rotate.php); 
}

this method is very clever.

4. about the height adaptation of div
today xiaowei asked me to help him solve a problem for his page, which is the height adaptation of div, that is, nesting in a parent div there are two child divs, one on the left and one on the right. the content of the right child div can be infinitely expanded, and the height of the parent div can be infinitely stretched. using the general layout method, it can be browsed correctly in ie, and the parent div can be browsed correctly in mozilla. the height is fixed at about 10px, and it cannot adapt to the height, nor does height:auto. what should i do? i referenced an article on the internet. to achieve adaptive height, the div layer must have a float attribute, so i started experimenting. if float:left is used, the div will go to the far left of the page. this is easy to handle. i am outside it. add another layer of div and set the position. then even if the float:left inside is moved, the position will not be moved.

xhtml:

==================================== =========================

<div id="container_father"> 
<div id="container"> 
<div id="panel"> test<br /> 
test<br /> 
test<br /> 
<!-- id="panel" --> 
</div> 
<div id="sidebar"> 
<ul> 
<li class="current">预安装检查</li> 
<li>阅读 pfc 授权协议</li> 
<li>初始化数据库</li> 
<li>完成安装</li> 
</ul> 
<!-- id="sidebar" --> 
</div> 
<!-- id="container" --> 
</div> 
</div>

css
============ =====================================

#container_father { 
margin-left: auto; 
margin-right: auto; 
padding: 0px; 
width: 750px; 
} 

#container { 
width: 750px; 
border: 1px solid #cccccc; 
padding: 8px; 
margin: 0px; 
background-color: #f1f3f5; 
float: left; 
}

5. in-depth standards ~ the ie doubled float-margin bug (ie double float-margin bug)
what happened?

a piece of error-free code places a left-floating (float:left) element into a container box (box), and uses a left margin (margin-left) on the floating element to make it create a distance from the left side of the container. seems pretty simple, right? but until it was viewed in ie/win, the border length of the left-floated element in the browser was mysteriously doubled!

what should the situation be?

the following emoticon shows a simple div (brown box) containing a left-floating div (green box). the floated element has a 100px left margin, creating a 100px gap between the container box and its left edge. so far, so good.

 .floatbox { 
float: left; 
width: 150px; 
height: 150px; 
margin: 5px 0 5px 100px; 
/*this last value applies the 100px left margin */ 
}

old ie "double occupation"

the same code as it is is displayed in a slightly different way when viewed in ie/win. the following emoticon shows the layout of ie/win. done on.

why does this happen? don't ask such stupid questions! this is ie, remember? compliance with standards is only an ideal situation and is not expected to be realized. this simple fact proves it.

key points

this bug only occurs between the floating element and the inner edge of the container box when the direction of the floating border and the floating element is the same. anything after that is similar. floated elements with borders do not render double the border. only the first floated element in a specific float row will suffer from this bug. the double border mysteriously appears in the same way on the right as it does on the left.

finally, the fix!

until now (january 2004) this bug has been considered unfixable, and is usually used to replace the wrong border control method such as: an invisible floating element's left margin, together with an inner nested boxes together, visible boxes inside invisible floats; or use tricks to set only 1/2 of the border for ie/win. this approach works, but is messy and messes up clean source code. but now it's all over.

steve clason found a fix, described in his guest demo, that fixes the double margins and around text indentation bug. this is a classic ie bug fix, using a property to fix bugs that affect unrelated properties.

how to do it now?

study it, simply setting {display: inline;} to the floated element is all that is needed! yes, sounds too simple, doesn't it? but it's true that just an "inline" declaration of display will do the job.

those familiar with the rules know that floated elements are automatically set to "block" elements, regardless of what they were before. as steve pointed out from the w3c:

9.5.1 positioning the float: the 'float' property 

"this property specifies whether a box should float to the left, right, or not at all. it may be set for 
elements that generate boxes that are not absolutely positioned. the values of this property have the following
 meanings: 

left 
the element generates a block box that is floated to the left. content flows on the right side of the box, 
starting at the top (subject to the 'clear' property). the 'display' is ignored, unless it has the 
value 'none'. 

right 
same as 'left', but content flows on the left side of the box, starting at the top. 

none 
the box is not floated. "

this means that {display: inline;} on floated elements will be ignored, and in fact no changes will be rendered in all browsers, including ie. however, it somehow makes ie stop doubling the bounds of the floated element. therefore, this fix can be applied directly without any cumbersome hidden methods. if a future browser decides that it doesn't like this fix, it can simply be built into an ie-specific tan hack with the same details as the ie three pixel text-jog demo.

here are two live demonstrations using the same code as before. the first shows the ie bug as usual, and the next uses the "inline" fix for floating elements.

.floatbox { 
float: left; 
width: 150px; 
height: 150px; 
margin: 5px 0 5px 100px; 
display: inline; 
}

the above is the content of experience exchange on page 1/2 of css differences and solutions under ie and firefox. for more related content, please pay attention to the php chinese website (www.php.cn)!