Differences between CSS in IE and Firefox and solutions page 1/2

CSS has a high value for the compatibility of browsers. In general, there is a great difference between IE and Firefox. Here we will introduce the compatibility points.
High Resolution
IE: the actual height will be used even if the height of the image content is defined based on the height change of the content, including the undefined height of the image content, when the content exceeds the height
Firefox: when no height is defined, if the image content is included in the content, the MF height resolution is based on the printing standard, which will cause a highly inconsistent situation with the actual content; when the height is defined, but the content exceeds the height, the content will exceed the defined height, but the style used in the area will not change, resulting in style dislocation.
Conclusion: If you can determine the content height, you 'd better define the height. If there is no way to define the height, you 'd better not use the border style. Otherwise, the style will be messy!

Analysis of ALT and title of IMG objects
ALT: the prompt when the photo does not exist or the load error occurs;
Title: tip description of the photo.
If title is not defined in IE, ALT can also be used as the IMG tip. However, in MF, the two are completely used according to the standard definition.

Conclusion: when defining IMG objects, you can write both ALT and title objects to ensure that they can be used properly in various browsers.

Other details
When you write CSS, especially when you use float: left (or right) to arrange one-click images, you will find that there is a normal problem in Firefox and IE. No matter whether you use margin: 0 or border: 0 as the constraint, it will not help.

In fact, there is another problem here, that is, the processing of spaces by IE. Firefox ignores the processing of spaces between blocks by IE. That is to say, the end of a div should be followed by a DIV, and there should be no carriage return or space in the middle. Otherwise there may be problems, such as 3px deviation, and this cause is hard to find.

Unfortunately, I encountered this problem again, connecting multiple IMG labels and defining float: left. I hope these images can be connected. However, the results are normal in Firefox, and each IMG displayed in IE is 3 px apart. Deleting spaces between tags does not work.

Later, the solution was to set Li outside IMG and define margin: 0 for Li, which solved the display deviation between IE and Firefox. The explanation of some models by IE may cause many errors. You can only find the cause if you try more.

2. nested Div: the height of the parent Div cannot be automatically changed based on the Child Div.
<Div id = "parent">
<Div id = "content"> </div>
</Div>

When the content is too large, even if the parent is set to a height of 100% or auto, it cannot be automatically stretched in different browsers. Solution

<Div id = "parent">
<Div id = "content"> </div>
<Div style = "Font: 0px/0px sans-serif; clear: Both; display: Block"> </div>
</Div>

A space with a height of 1 is generated at the bottom of the layer to solve this problem.

3. CSS Div learning notes
1. Basically, the DIV of each block must have its own ID to prevent blocks of different functions from using the same ID/class

2. Each relatively large block div is followed by a <! --/Id --> MARK start and end

3. Another method for hiding text: Text-indent:-9999px; line-Height: 0

4. cleverly handle the two parallel columns:
1)
Right column: P, width = 44.5%, float = left
Column 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 of the above two methods is to select float = left

5. Randomly switch images:
# Random {
Background: URL (/rotate. php );
}
This method is clever.

4. highly adaptive Div
Today, Xiaoye asked me to solve a problem for his pages, that is, the height self-adaptation of the DIV, that is, embedding one left, one right, two sub-Div in a parent Div, the content of the sub-Div on the right can be infinitely expanded, so that the height of the parent Div can be infinitely lengthened. The general layout method can be used for correct browsing in IE, in Mozilla, the height of the parent div is fixed at around 10 PX, and the height cannot be adaptive. The height: auto cannot be used either. What should I do. I have referenced a document on the Internet. To achieve adaptive height, the DIV layer must have the float attribute. So I started the experiment. If float: left, the DIV ran to the far left of the page, this is easy to do. I set a div on the outside and set the position. Even if the float: Left is not 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"> pre-Installation check </LI>
<Li> Read the PFC authorization protocol. </LI>
<Li> initialize the database </LI>
<Li> complete installation </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;
}

From: http://ulean.zg163.net/