CSS for browser compatibility is very high value, usually in the case of IE and Firefox there is a large resolution differences, here to introduce the compatibility points.
The resolution of the height
IE: Will vary according to the height of the content, including undefined height of the picture content, even if the definition of height, when the content exceeds the height, will use the actual height
Firefox: When no height is defined, if the content includes the content of the picture, MF's high resolution is based on the printing standard, which will cause and the actual content is highly incompatible with the situation; When the height is defined, but the content exceeds the height, the content goes beyond the defined height, but the style used by the zone does not change. Create a pattern dislocation.
Conclusion: We can determine the content of the height of the best definition of height, if there is no way to define the height, it is best not to use the border style, otherwise the style will certainly appear chaos!
An analysis of the IMG object ALT and Title
Alt: When the photo does not exist or the load error prompts;
Title: Tip Description of the photo.
If Title,alt is not defined in IE, it can also be used as a tip for IMG, but in MF, both are used exactly as defined in the standard
Conclusion: When we define the IMG object, we will write all the ALT and title objects, so that we can use them in all kinds of browsers.
Other details of the difference
When you are writing CSS, especially with float:left (or right) to arrange a picture, you will find in Firefox inside normal and IE there are problems. Whether you use margin:0, or border:0 to restrain, it is no avail.
In fact, there is another problem, ie for the space processing, Firefox is ignored and ie for blocks and blocks between the space is handled. That is to say a div after the end of a div write, the middle do not have a carriage return or space. Otherwise, there may be problems, such as the deviation of 3px, and the reason is difficult to find.
It was unfortunate that I ran into the problem of multiple IMG tags attached and then defined the Float:left, hoping that the images could be connected. But the result is normal inside Firefox and every img shown in IE is 3px apart. I have no effect on removing all the spaces between the labels.
Later, the solution is to set Li on the outside of IMG and define margin:0 for Li, which solves the display deviation of IE and Firefox. IE for some models of interpretation will produce a lot of error problems, only a lot of try to find out why.
2, nested div: the height of the parent div can not automatically change according to the Sub Div solution
<div id= "Parent" >
<div id= "Content" > </div>
</div>
When content contents for a long time, even if the parent set a height of 100% or auto, in different browsers still can not be fully automatic extension. Solution
<div id= "Parent" >
<div id= "Content" ></div>
<div style= "font:0px/0px sans-serif;clear:both;display:block" > </div>
</div>
This problem can be removed by creating a space at the bottom of the layer with a height of 1.
3, CSS DIV Learning Notes
One, basically each block div must have own ID, eliminates the different function The block uses the same id/class
Second, each slightly larger block Div followed by a <!--/id--> tag start, end
Third, another way to hide text text-indent: -9999px; line-height:0
Four, skillfully deal with two columns in parallel:
1)
Right column p, width=44.5%, Float=left
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 point of the above two methods is to select one of the Float=left
Five, random switch pictures:
#random {
Background:url (/rotate.php);
}
This method is very ingenious.
4, about the highly adaptive div
Today, I was asked to help his page son solve a problem, is the highly adaptive Div, that is, in a parent div nested left and right two sub Div, the right child div content can be unlimited expansion, but can make the parent div height can be infinitely elongated, with the general layout method, in IE can be correctly browsed, In Mozilla, the parent div height is fixed at about 10px, can not adapt to the height, Height:auto also not, how to do it. Online reference to a material, to achieve adaptive height, the div layer must have a float property, so I started experimenting, float:left words, Div ran to the left of the page, this is good to do, I put a layer of div outside it, the position set, then the inside of even float: Left will not be moved anywhere.
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 PFC Licensing protocol </li>
<li> Initializing 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/
Current 1/2 page
12 Next read the full text
