Webpage competition, webpage Div + CSS compatibility tips

Difference between IE6 and FF:
Background: orange; * Background: blue;

 

 

Difference between IE6 and IE7:
Background: Green! Important; Background: blue;

 

 

Difference between IE7 and FF:
Background: orange; * Background: green;

 

 

Difference ff, IE7, IE6:
Background: orange; * Background: Green! Important; * Background: blue;

 

 

IE7 and IE8 compatibility:
<Meta http-equiv = "X-UA-compatible" content = "Ie = emulateIE7"/>

Head
1. Support for different keywords by several browsers in CSS.Repeated definition of browser compatibility
! Important can be recognized by Firefox and IE7
* It can be recognized by IE6 and IE7.
_ Being recognized by IE6
*+ Can be recognized by IE7

2. Condition comments dedicated to IE
<! -- Other browsers -->
<LINK rel = "stylesheet" type = "text/CSS" href = "css.css"/>

<! -- [If IE 7]>
<! -- Suitable for IE7 -->
<LINK rel = "stylesheet" type = "text/CSS" href = "ie7.css"/>
<! [Endif] -->

<! -- [If lte ie 6]>
<! -- Suitable for IE6 and later -->
<LINK rel = "stylesheet" type = "text/CSS" href = "ie.css"/>
<! [Endif] -->

3. Several browsers explain the actual pixels
IE/Opera: actual width of the object = (margin-left) + width + (margin-right)
Firefox/Mozilla: actual width of the object = (margin-left) + (border-left-width) + (padding-left) + width + (padding-right) + (border-right-width) + (margin-right)

4. mouse gesture: The cursor attribute of Firefox does not support hand, but both pointer and IE are supported. Therefore, pointer is used for compatibility.

5. When setting the style attribute of the HTML Tag in Firefox, all positions, width, height, and size values must be followed by PX. IE also supports this method, so the unit of PX is uniformly added. For example, obj. style. Height = imgobj. style. height + 'px ';

6. firefox cannot parse the abbreviated padding attribute settings, such as padding 5px 4px 3px 1px; it must be changed to padding-top: 5px; padding-Right: 4px; padding-bottom: 3px; padding-left: 1px0;

7. when the indentation of UL and ol lists is eliminated, the style should be written as: List-style: none; margin: 0px; padding: 0px; the margin attribute is valid for IE, And the padding attribute is valid for Firefox.

8. Transparent CSS control: IE: filter: progid: DXImageTransform. Microsoft. Alpha (style = 0, opacity = 60); Firefox: opacity: 0.6;

9. CSS rounded corners: IE: corner corners are not supported;
Firefox:-moz-border-radius: 4px; or
-Moz-border-radius-topleft: 4px;
-Moz-border-radius-topright: 4px;
-Moz-border-radius-bottomleft: 4px;
-Moz-border-radius-bottomright: 4px;

10. CSS double-line concave and convex border: IE: Border: 2px outset;
Firefox:
-Moz-border-top-colors: # d4d0c8 white;
-Moz-border-left-colors: # d4d0c8 white;
-Moz-border-right-colors: #404040 #808080;
-Moz-border-bottom-colors: #404040 #808080;

11. ie supports the CSS method cursor: URL () to customize the Color Style of the cursor Style File and scroll bar. Firefox does not support either of the above.

12. ie has the bug that the select control is always at the top layer, and all CSS does not work for the select control.

13. ie supports label labels in form, including images and text content. Firefox does not support label containing images. clicking an image cannot make radio or checkbox labeled label for produce results.

14. textarea in Firefox does not support onscroll events

15. Firefox does not support display inline and block

16. Firefox sets margin-left for div, and margin-right is centered when it is set to auto, but not in IE.

17. When Firefox sets text-align for the body, the DIV needs to set margin: auto (mainly margin-left margin-right) to be centered.
18. It is best to set the CSS style of the hyperlink in the following order: L-v-h-. That is
<Style type = "text/CSS">
<! --
A: link {}
A: visited {}
A: hover {}
A: active {}
-->
</Style>

In this way, the hover and active styles are not available for some accessed hyperlinks.

19. set long paragraph wrap in IE and set word-wrap: Break-word in CSS;

Javascript inserts are used in Firefox.CodeAs follows:
<SCRIPT type = "text/JavaScript">
/* <! [CDATA [*/
Function tobreakword (El, intlen ){
VaR OBJ = Document. getelementbyid (EL );
VaR strcontent = obj. innerhtml;
VaR strtemp = "";
While (strcontent. length> intlen ){
Strtemp + = strcontent. substr (0, intlen) + "";
Strcontent = strcontent. substr (intlen, strcontent. Length );
}
Strtemp + = "" + strcontent;
OBJ. innerhtml = strtemp;
}
If (document. getelementbyid &&! Document. All) tobreakword ("div_id", 37 );
/*]> */
</SCRIPT>

20. After the floating attribute is added to the sub-container, the container cannot be automatically opened.
Solution: Add a clear floating CSS clear: both to the next tag after the Tag ends;

21. After floatingIE6The outer margin is double the actual margin.
Solution: Add display: inline

22. There is a gap below IE6
Solution: Add display: block to IMG or set the vertical-align attribute to vertical-align: Top | bottom | Middle | text-bottom.

23. There is a gap between the two layers under IE6
Solution: set the right div to float: Left or define the margin-Right:-3px relative to IE6;

24. Display Method of ellipsis after the content in Li exceeds the length
<Style type = "text/CSS">
<! --
Li {
Width: 200px;
White-space: nowrap;
Text-overflow: ellipsis;
-O-text-overflow: ellipsis;
Overflow: hidden;
}
-->
</Style>

25. Set the element height and Row Height to the same value to vertically center the text.
<Style type = "text/CSS">
<! --
Div {
Height: 30px;
Line-Height: 30px;
}
-->
</Style>

26. Align text and text input boxes. Vertical-align: middle must be added to CSS; attribute settings
<Style type = "text/CSS">
<! --
... ...
Vertical-align: middle;
}
-->
</Style>

 
27. If a browser that supports Web Standards sets a fixed height value, it will not be opened like IE6, but wants to set a fixed height and want to be opened? The solution is to remove the height attribute and set Min-height. To ensure compatibility with IE6 that does not support Min-height, you can define it as follows:
{
Height: Auto! Important;
Height: 200px;
Min-Height: 200px;
}

28. In Web standard, the color of the scroll bar cannot be set for IE
Solution: Set the body in CSS to HTML
<Style type = "text/CSS">
<! --
HTML {
Scrollbar-face-color: # f6f6f6;
Scrollbar-Highlight-color: # FFF;
Scrollbar-shadow-color: # eeeeee;
Scrollbar-3dlight-color: # eeeeee;
Scrollbar-arrow-color: #000;
Scrollbar-track-color: # FFF;
Scrollbar-darkshadow-color: # FFF;
}
-->
</Style>

29. IE6 containers with a height of about 1 px cannot be defined due to the default line height problem,
Solution: Set the container in CSS, for example, overflow: hidden | ZOOM: 0.08 | Line-Height: 1px.

30. Set transparent properties for Flash so that the layer is displayed on top of Flash
<Param name = "wmode" value = "Transparent"/> <! -- Solve the problem on IE //>
<Embed wmode = "Transparent "...... > <! -- Solve the problem on Firefox //>

31. After setting the padding attribute in Firefox, the width and height attribute values will be added accordingly. ie will not
Solution: Use! The important method defines a set of height and width.

32. firefox ignores spaces between Div and DIV, but ie processes them. Therefore, do not enter spaces or press Enter between two connected Div, otherwise, the format of different browsers may be incorrect, such as the famous 3px deviation, and the cause is difficult to find out.

33. The format is as follows:
<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. The solution produces a space with a height of 1 at the bottom of the layer, the Code is as follows:
<Div id = "parent">
<Div id = "content"> </div>
<Div style = "Font: 0px/0px sans-serif; clear: Both; display: Block"> </div>
</Div>

34. The sizes of small are different for IE and Firefox. Firefox is 13px and IE is 16px.

35. IE and Firefox have different sizes for spaces. Firefox is 4px and IE is 8px.

 

First of all, there are many introductions to the CSS hack method on the Internet, a wide variety of methods, and beginners are often confused. Some of these CSS hack methods are applicable to a very special case, while others are applicable to some common methods.
We can pay more attention to the latter in our daily work. The former does not need to pay too much attention, but simply searches the Internet to find a solution.
Here is a general hack method. For example, for a certain attribute in CSS, we want to set different values for different browsers. For example, for a DIV, we want the width to be 50 pixels in Firefox and 60 pixels in IE. How can this problem be achieved? See the following code:

# Demo Div {
Width: 50px;/* Firefox valid */
+ Width: 60px;/* ie valid */
}

In the code above, the width: 50px of row 2nd is a normal style. In the next row, add a plus sign before the width attribute. This style is considered invalid in Firefox, however, this plus sign in IE will be ignored, so it is still understood as the width attribute, so as to overwrite the previous setting, so that Firefox and IE can be distinguished.
What if I want to further distinguish IE 6 from IE 7? See the following code:

# Demo Div {
Width: 50px;/* Firefox valid */
+ Width: 60px;/* IE 7 valid */
_ Width: 70px;/* Valid for IE 6 */
}

The above code can differentiate the three browsers. In IE7, a plus sign is added before the property. This plus sign is ignored. If an underline is added before the property, the entire style is ignored, thus, the distinction between the three mainstream browsers is achieved.
At this point, we will naturally think, under what circumstances will this method be used to differentiate browsers? There are usually two types of pages we want to create. One is to completely start from scratch, and the other is to modify or repair an existing webpage.
In the first case, we are very clear about every detail of the web page, so we do not often encounter compatibility issues with Firefox and IE. Even if we encounter it, we can find other solutions. In the second case, it is much more complicated, because a webpage may be very complicated and the cascade relationship is also complicated, it is difficult to figure out the number of layer settings on a certain attribute that will affect it. Therefore, it is often possible to fix it in the form of "plaster.
For example, the final effect of the following page appears in Firefox after the rounded corners are neatly arranged in IE when a rounded corner frame is created, however, if it is adjusted according to Firefox, there will be misplacement in IE.
The page content is nested layer by layer. It is difficult to find the root cause of the problem without knowing the details. Therefore, it is very convenient to use the patching method here (although not the most elegant and perfect method). For example, you can use the above method to control the attributes of the rounded corner image.
In general, you can use the plus sign or underline Method for any attribute to set different browsers. Of course, it should be pointed out that any hack method should be used with caution. It is better to design it according to standard and elegant CSS. Such code is much better in readability and maintainability, it is also our goal.

why is there no problem with Div + CSS in IE6? Is there a problem in firfox? What is the cause, thank you
the big difference between IE and FF is 1. At a resolution of 1024, ie can display up to PX ff and px2. IE is highly fault-tolerant. That is to say, if your code is wrong, you may not be able to write less or show correct ff ~~~ 'The Common Problems for beginners: No floating is cleared ~~~~. Clear {clear: Both; Height: 1px; top:-1px; overflow: hidden} adds a

// For details, see H ttp: // www.jb51.net/article/20943.htm