FAQs about web standards make Firefox compatible with IE

Summary: As more and more people begin to accept web standards, some of the places that are not the same as before will make many new users suffer. In the past, you may have simply set a style that can be implemented without even setting it. However, you may still be confused about it. This article lists some common problems and solutions, which are helpful to new users.

1. Problems with the hover style after hyperlink access

Click to access the hyperlink style is not with Hover and active, many people should have encountered this problem, the solution is to change the CSS attribute order: L-V-H-A

Code:

<Style type = "text/CSS">
<! --
A: link {}
A: visited {}
A: hover {}
A: active {}
-->
</Style>

 

 

2. How to enable automatic line feed for continuous long fields in Firefox

We all know that you can use Word-wrap: Break-word directly in IE. In ff, we use JS insert & #10; to solve this problem.

Code:

<Style type = "text/CSS">
<! --
Div {
Width: 300px;
Word-wrap: Break-word;
Border: 1px solid red;
}
-->
</Style>

<Div id = "FF"> commandid </div>

<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) + "& #10 ;";
Strcontent = strcontent. substr (intlen, strcontent. Length );
}
Strtemp + = "& #10;" + strcontent;
OBJ. innerhtml = strtemp;
}
If (document. getelementbyid &&! Document. All) tobreakword ("FF", 37 );
/*]> */
</SCRIPT>

 

 

3. Why is the height of the parent container not adaptive under ff?

After the floating attribute is added to the sub-container, the container cannot be automatically opened. The solution is to add a floating element after the label ends.

Code:

Clear: both;

 

 

4. Double margin bug of IE6

The external margin is 10px after floating, but IE is interpreted as 20px. The solution is to add

Code:

Display: inline

 

 

5. The Container text that is absolutely located in IE6 cannot be selected normally

This problem exists in IE6 and 7. The solution is to enable IE to enter the qurks mode. For more information about qurks mode, see: http://www.microsoft.com/china/msdn/library/webservices/asp.net/
Aspnetusstan. mspx? MFR = true

6. Why is there a gap in the image below IE6?

There are also many ways to solve this bug. You can change the HTML layout, set IMG to display: block, or set vertical-align to vertical-align: top | bottom | Middle | text-bottom
Can be solved.

7. How are there gaps between two layers in IE6?

This ie 3px bug often occurs. The solution is to float: Left or define. left margin-Right:-3px relative to IE6;

8. List-style-image cannot be accurately located

The positioning of list-style-image is also frequently asked. The solution is generally to use the Li background simulation. Here, the relative positioning method can also be used.

9. How to display the content in Li with ellipsis after the content length exceeds

This method is applicable to IE and opbrowser.

Code:

<Style type = "text/CSS">
<! --
Li {
Width: 200px;
White-space: nowrap;
Text-overflow: ellipsis;
-O-text-overflow: ellipsis;
Overflow: hidden;
}

-->
</Style>

 

 

10. What is the difference between ID and class defined in web standards?

I. duplicate IDs are not allowed in web standards. For example, div id = "AA" cannot be repeated twice, while class defines classes, which can be infinitely repeated in theory, in this way, you can use the definition that requires multiple references.

Ii. attribute priority
The priority of ID is higher than that of class.

III. convenience for JS and other client scripts. If you want to perform script operations on an object on the page, you can define an ID for it. Otherwise, you can only find it by traversing the page element and adding specific attributes, this is a relatively time-consuming resource, which is far less simple than an ID.

 

11. How to vertically center text

Set the element height to the row height.

Code:

<Style type = "text/CSS">
<! --
Div {
Height: 30px;
Line-Height: 30px;
Border: 1px solid red
}
-->
</Style>

 

 

12. Align text and text input boxes

Add vertical-align: middle;

Code:

<Style type = "text/CSS">
<! --
Input {
Width: 200px;
Height: 30px;
Border: 1px solid red;
Vertical-align: middle;
}
-->
</Style>

 

 

13. Why cannot I center the data horizontally under ff?

FF, set the left and right external patches of the container to auto.

Code:

<Style type = "text/CSS">
<! --
Div {
Margin: 0 auto;
}
-->
</Style>

 

 

14. why can't the FF text support the height of the container?

Containers with fixed height values in the standard browser won't be opened as in IE6, so I want to fix the height and how can I set it to be supported? The method is to remove the Min-Height: 200px setting for height. Here, we can define this to take care of IE6 that does not know Min-height:

Code:

{
Height: Auto! Important;
Height: 200px;
Min-Height: 200px;
}

 

 

15. Why is the container width and FF interpretation different under IE6?

Code:

<? XML version = "1.0" encoding = "gb2312"?>
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 strict // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Style type = "text/CSS">
<! --
Div {
Cursor: pointer;
Width: 200px;
Height: 200px;
Border: 10px solid red
}

-->
</Style>
<Div onclick = "alert (this. offsetwidth)"> Web Standard FAQ </div>

 

The difference is whether the overall width of the container includes the Border width. Here, IE6 is interpreted as 200px, while FF is interpreted as 220px, so how did it cause the problem? We remove the XML at the top of the container will find the original problem out of this, the Declaration at the top triggers the qurks mode of IE, about qurks mode, standards mode related knowledge, please refer to: http://www.microsoft.com/china/msdn/library/webservices/asp.net/
Aspnetusstan. mspx? MFR = true

16. Why can't I set the color of the scroll bar in Web Standard ie?

The solution is to change the body to HTML.

Code:

<! Doctype HTML public "-// W3C // dtd xhtml 1.0 strict // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<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>

 

 

17. Why is my defined style ineffective?

Here, you cannot use. AA to define how Li can solve this problem? The answer is to increase the priority of. AA, for example, # Aa ul Li. AA.

Code:

<! Doctype HTML public "-// W3C // dtd xhtml 1.0 strict // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Style type = "text/CSS">
<! --
# Aa ul Li {
Color: red
}
. AA {
Color: Blue
}
-->
</Style>
<Div id = "AA">
<Ul>
<Li class = "AA">
Web standards FAQs web standards FAQs web standards FAQs web standards FAQs
</LI>
</Ul>

</Div>

 

 

18. Why cannot I define a container with a height of around 1 px?

In IE6, this problem is caused by the default Row Height, and there are many solutions, such as overflow: hidden | ZOOM: 0.08 | Line-Height: 1px.

19. Why cannot the background color be displayed?

Code:

<! Doctype HTML public "-// W3C // dtd xhtml 1.0 strict // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Style type = "text/CSS">
<! --
Ul {
Background: red
}
Li {
Float: left;
Width: 180px;
}
-->
</Style>
<! -- [If lte ie 6]>
<Style>
. Gainlayout {Height: 1px ;}
</Style>
<! [Endif] -->
<Ul class = "gainlayout">
<Li> Web Standard FAQ </LI>
<Li> Web Standard FAQ </LI>
<Li> Web Standard FAQ </LI>
<Li> Web Standard FAQ </LI>
<Li> Web Standard FAQ </LI>

<Div style = "clear: both"> </div>
</Ul>

 

IE sets the background color ul is not displayed, This Is A haslayout problem, the solution is also a lot of reference http://www.satzansatz.de/cssd/onhavinglayout.htm

One solution:

Code:

<! -- [If lte ie 6]>
<Style>
. Gainlayout {Height: 1px ;}
</Style>
<! [Endif] -->

 

 

20. How can I display layers on top of flash?

The solution is to make flash transparent.

Code:

<Param name = "wmode" value = "Transparent"/>

 

 

21. How to center a layer vertically in the browser

Here we use the absolute percentage position, and the method of negative value of the external patch, the negative value is its own width and height divided by two

Code:

<Style type = "text/CSS">
<! --
Div {
Position: absolute;
Top: 50%;
Left: 50%;
Margin:-100px 0 0-100px;
Width: 200px;
Height: 200px;
Border: 1px solid red;
}

-->
</Style>

 

 

22. The image is perpendicular to the container

Code:

<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Style type = "text/CSS">
<! --
* {Margin: 0; padding: 0}
Div {
Width: 500px;
Height: 500px;
Border: 1px solid # CCC;
Overflow: hidden;
Position: relative;
Display: Table-cell;
Text-align: center;
Vertical-align: Middle
}
Div P {
Position: static;
+ Position: absolute;
Maximum: 50%
}
IMG {
Position: static;
+ Position: relative;
Top:-50%; left:-50%;
Width: 276px;
Height: 110px
}

-->
</Style>

<Div> <p> </P> </div>

 

Or you can use the background image as follows:

Code:

Background: URL ("logo.gif") center no-Repeat;

 

 

23. How to arrange Div horizontally

You can use float: left to arrange the DIV horizontally, set the object to inline, and absolutely locate the object.

Code:

<! Doctype HTML public "-// W3C // dtd xhtml 1.0 strict // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Style type = "text/CSS">
<! --
Div {
Float: left;
Width: 200px;
Height: 200px;
Border: 1px solid red
}
-->
</Style>

<Div> Web Standard FAQ </div>
<Div> Web Standard FAQ </div>
<Div> Web Standard FAQ </div>