The difference and solution of CSS under IE and Firefox 1th/2 page _ Experience Exchange

Source: Internet
Author: User
CSS is very valuable for browser compatibility, usually there is a big difference between IE and Firefox, here are the key points of compatibility.
Analysis of the height
IE: Will vary according to the height of the content, including the undefined height of the picture content, even if the height is defined, when the content exceeds the height, the actual height will be used
Firefox: When there is no height defined, if the content includes the content of the picture, MF's height resolution is based on the printing standard, which will result in a situation where the actual content height is not met; When the height is defined, but the content exceeds the height, the content exceeds the defined height, but the style used in the area does not change. Causes the style dislocation.
Conclusion: It is best to define height when you can determine the height of the content, if there is no way to define the height, it is best not to use the border style, otherwise the style will definitely appear chaotic!

IMG Object ALT and Title parsing
Alt: Prompt when the photo does not exist or the load is wrong;
Title: Tip Description of the photo.
In IE, if no title,alt is defined, it can also be used as an IMG tip, but in MF the two are used exactly as defined in the standard

Conclusion: When you define an IMG object, you end up writing both the ALT and title objects to ensure proper use in all 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 normal and IE inside there is a problem. Whether you use margin:0, or border:0 to restrain, it is useless.

In fact, there is another problem, ie for the processing of space, Firefox is ignored and ie for blocks and blocks between the space is processed. That is, a p after the end of a p write, do not have a carriage return or space in the middle. Otherwise there may be problems, such as 3px deviations, and the reason is hard to find.

It was unfortunate that I had this problem again, multiple IMG tags attached, and then the definition of float:left, I hope these pictures can be linked together. But the results are normal in Firefox and every img shown in IE is 3px apart. I have no effect on removing the spaces between the tabs.

Later, the solution is to set up an IMG outside the Li, and the Li definition margin:0, which solves the IE and Firefox display deviation. IE's interpretation of some models can cause many error problems, and only a lot of attempts can be found.

2. Nested div: The height of the parent div cannot be changed automatically according to the sub-div solution

<div id= "Parent" > <div id= "Content" > </div> </div>

When content is a long time, even if the parent has set a height of 100% or auto, it will not be able to stretch automatically under different browsers. Solution Solutions

<div id= "Parent" > <div id= "Content" ></div> <div style= "font:0px/0px sans-serif;clear:both; Display:block "> </div> </div>

Create a space at the bottom of the layer with a height of 1 to remove the problem

3. CSS DIV Learning Notes

First, basically each block of div to have their own ID, to prevent different functions of the block with the same id/class

Second, each slightly larger block Div is followed by a <!--/ID----Start, end

Third, the hidden text of another method text-indent: -9999px; line-height:0

Four, skillfully handle the 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, randomly switch the picture:

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

This method is ingenious.

4, about the height of the div adaptive
Today, small urine let me help his page to solve a problem, is the height of the Div adaptive, that is, in a parent div nested a left and right two sub-Div, the right sub-div content can be infinitely extended, and can make the height of the parent div can be infinitely elongated, with the general layout method, in IE can be correctly browsed, In Mozilla, the height of the parent div is fixed at about 10px, can not adapt to height, Height:auto also not, how to do it. Online reference to a piece of information, to achieve the adaptive height, div layer must have a float property, so I began to experiment, float:left words, Div ran to the left of the page, this is good to do, I set a layer of div outside it, the position is set, then the inside of even float: Left 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" > Pre-install check </li> <li> read PFC Authorization protocol </li> <li> Initialize 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's going wrong?

An error-free code places a left-floating (float:left) element into a container box and uses the left border (margin-left) on the floating element to create a distance from the left side of the container. It looks pretty simple, right? But until it is browsed in the Ie/win, the boundary length of the left floating element in the browser has been mysteriously doubled!

What should be the situation?

The following emoticon shows a simple div (a brown box) containing a left-floating div (a green box). The floating element has a 100px left border, which creates a 100px gap between the container box and its left edge. So far, it's been good.

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

Stale ie "double occupy"

is displayed in a slightly different way when the same code is browsed in Ie/win, and the following emoticons show what Ie/win is doing on the layout.

Why is this happening? Don't ask such silly questions! This is IE, remember? The simple fact that conforming to the standard is only an ideal condition and is not expected to be achieved is proving.

Focus

This bug only occurs when the floating boundary and the direction of the floating element appear between the floating element and the inner edge of the container box, after which any floating elements with similar boundaries do not appear double-edged. Only the first floating element of a particular floating line encounters this bug. As in the case of left, the double border also mysteriously shows in the same way right.

Finally, fix it!

Until now (January 04) This bug has been considered to be irreparable, usually used to replace the wrong boundary control method such as: an invisible floating element of the left margin, together with an inline box, the visible box is installed in the invisible floating elements, or the use of skill only ie/ Win sets the 1/2 value of the boundary. It came into effect, but it was messy and messed up clean source code. But now it's all over.

Steve Clason found a fix that describes a bug in his guest demo that fixes double boundaries and indents around text. This is a classic IE bug fix, using a property to fix bugs that affect irrelevant properties. What does

do now?

to study it, simply put {display:inline;} Set to floating elements is all you need to do! Yes, it sounds too easy, doesn't it? It is true, however, that just one display's "inline" statement is up to the task.

People familiar with the rules know that floating elements are automatically set to "block" elements, regardless of what they were. As Steve points out in the paper:

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 is set for elements this generate boxes that is not absolutely positioned. The values of this property has the following meanings:left the element generates a block box that's floated to the Lef T. Content flows on the right side of the box, starting at the top (subject to the ' clear ' property). The ' display ' is ignored, and 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 of the box is floated. "

This indicates the {display:inline on floating element;} will be ignored, in fact all browsers do not present any changes, including IE. However, it somehow lets 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 load the fix into a tan hack with IE alone, with details like IE three Pixel text-jog Demo.

Here are two vivid demos that use the same code as before, the first one that shows IE bugs as usual, and the next to use an "inline" fix for floating elements.

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

Above is IE and Firefox under the difference between CSS and solutions 1th/2 Page _ Experience Exchange content, more relevant content please pay attention to topic.alibabacloud.com (www.php.cn)!

  • Related Article

    Contact Us

    The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

    If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.