css| Solution
1, IE and Firefox on the difference between CSS parsing
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
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.asp);/* This ASP file write it yourself, not difficult to * *
}
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;
}
5, in-depth standard ~ The IE doubled float-margin bug (ie double floating boundary bug) what happened?
An error-free code places a left-floating (float:left) element into a container box, and uses the left boundary (Margin-left) on a floating element to make it a distance from the left side of the container. It looks pretty simple, right? But until it is browsed in Ie/win, the boundary length of the left floating element in the browser is mysteriously doubled!
What should be the situation?
The following illustration shows a simple div (tawny box) containing a left-floating div (green box). The floating element has a 100px left boundary that creates a 100px gap between the container box and its left edge. So far, it has been good.
. floatbox {
Float:left;
width:150px;
height:150px;
margin:5px 0 5px 100px;
/*this Last value applies the 100px left margin * *
}
Old IE "double-occupied"
The same code is displayed in a slightly different way when viewed in Ie/win, and the following illustration shows what Ie/win is doing with the layout.
Why does this happen? Don't ask such silly questions! This is IE, remember? Conforming to the standard is only the ideal condition, not expected to achieve, this simple fact is being validated.
Focus
This bug only occurs when the direction of the floating boundary and the floating element appears between the floating element and the inner edge of the container box, and any floating elements that have similar boundaries after that will not present double bounds. Only the first floating element of a particular floating row will encounter this bug. Like the left, double borders are mysteriously shown in the same way as in the right.
Finally, fix the way!
Until now (January 04) This bug has been thought to be impossible to fix, a control method that is usually used to replace the wrong boundary such as the left margin of an invisible floating element, together with an embedded box, the visible box is mounted in an invisible floating element, or the use of the technique only sets the boundary of the Ie/win 1/ 2 value. This approach came into effect, but it was messy and messed up the clean source code. But now it's all over.
Steve Clason found a fix to describe the double border and indent the bug around the text in his guest demo. This is a classic IE bug fix, using a property to fix bugs that affect unrelated properties.
How do you do it now?
Study it, simply put {display:inline;} setting to a floating element is all you need to do! Yes, it sounds too easy, doesn't it? But this is true, just a display of "inline" statement has been able to do.
People familiar with the rules know that floating elements are automatically set to "block" elements, regardless of what they were before. As Steve points out from the consortium:
9.5.1 positioning the float:the ' float ' property
"This property specifies whether a box should float to the left, right, or not on all." It May is set for elements this generate boxes that are not absolutely positioned. The values of this property have the following meanings:
Left
The element generates a block box, which is floated to the left. The Content flows on the right side of the box and 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 to the box, starting at the top.
None
The box is not floated. "
This indicates that {display:inline} on the floating element will be ignored, virtually all browsers are not showing any changes, including IE. However, it somehow let ie stop doubling the boundaries of floating elements. Thus, this fix can be applied directly without any cumbersome hiding methods. If a future browser decides to get sick of this fix, just put this fix into the tan hack for IE alone, details like IE Three Pixel text-jog Demo.
Here are two vivid demos that use the same code as before, the first to show IE bugs as usual, and the next to use the "inline" fix for floating elements.
. floatbox {
Float:left;
width:150px;
height:150px;
margin:5px 0 5px 100px;
Display:inline;}
