Shulou(Shulou.com)06/02 Report--

This article introduces what are the common problems of FireFox and IE compatible CSS, the content is very detailed, interested friends can refer to, hope to be helpful to you.

In front-end development, we often encounter browser compatibility problems, especially between IE and FireFox. The editor enumerates the compatibility problems between FireFox and IE, which are common to developers, and gives the relevant solutions.

1. The problem that the hover style does not appear after hyperlink access

The hyperlink styles that have been clicked and visited no longer have hover and active. Many people should have encountered this problem. The solution is to change the order of the CSS attributes: L-V-H-A:

How to make continuous long fields wrap automatically under 2.FireFox

It is well known that it is OK to use word-wrap:break-word directly in IE, and we use JS insertion in FF.

To solve the problem:

Aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaa Java Code / * intLen) {strTemp+=strContent.substr (0reint intLen) + "

"; strContent=strContent.substr (intLen,strContent.length);} strTemp+="

"+ strContent; OBJ [XSS _ clean] = strTemp;} if (document.getElementById & &! document.all) toBreakWord (" ff ", 37); / *]] > * / * intLen) {strTemp+=strContent.substr (0mint Len) +"

"; strContent=strContent.substr (intLen,strContent.length);} strTemp+="

"+ strContent; OBJ [XSS _ clean] = strTemp;} if (document.getElementById & &! document.all) toBreakWord (" ff ", 37); / *] > * /

Why the height of the parent container can not be adaptive under 3.ff

After the floating attribute is added to the child container, the container will not automatically open. The solution is to add a clear floating element at the end of the tag.

Clear: both; clear: both

Double margin BUG of 4.IE6

After floating, the outer margin is originally 10px, but IE is interpreted as 20px. The solution is to add:

Display: inline display: inline

5. The problem that the text in the container with absolute positioning under IE6 cannot be selected properly.

This problem exists in IE6, 7, and the solution is to let IE into qurks mode.

6. Why is there a gap at the bottom of the picture under IE6

There are many ways to solve this BUG, such as changing the typesetting of html, setting img to display:block or setting vertical-align attribute to vertical-align:top | bottom | middle | text-bottom

All can be solved.

7. Why is there a gap between the two layers under the IE6

The 3PX BUG of this IE is also common, and the solution is to define .left margin-right:-3px for .right, which is also floating float:left or relative to IE6.

8. The problem that list-style-image can't locate accurately

The positioning problem of list-style-image is often asked, and the solution is generally simulated by the background of li, and the method of relative positioning can also be solved here.

9. The method of displaying content in LI with ellipsis when it exceeds the length

This method applies to IE and OP browsers:

What is the difference between id and class defined in the 10.web standard?

1. Repeating ID is not allowed in the web standard.

For example, div id= "aa" cannot be repeated twice, while class defines a class, which in theory can be repeated infinitely, so that a definition that requires multiple references can be used.

two。 The priority of the property.

ID takes precedence over class, as shown in the example above.

three。 Facilitate client script such as JS.

If you want to script an object on the page, you can define an ID for it, otherwise you can only find it by traversing the page element and specifying specific attributes, which is a relative waste of time and resources and is not as simple as an ID.

11. How to hold the Chinese text vertically

Set the element height to be consistent with the row height.

twelve。 How to align text with text input boxes

Plus vertical-align:middle

13. Why can't you center horizontally under the FF?

Under FF, set the left and right outer patch of the container to auto.

14. Why can't the text open the height of the container under FF?

The container with a fixed height in a standard browser will not be stretched as it is in IE6, so I want to fix the height and how do I want to be able to be stretched? The way to do this is to remove the height and set the min-height:200px;. In order to take care of the IE6 that does not know min-height, you can define it as follows:

Height:200px; min-height:200px;} {heightwaver autogenous important; height:200px; min-height:200px;}

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

Web Standard frequently asked questions web Standard frequently asked questions

The difference is whether the overall width of the container includes the width of the border, where IE6 is interpreted as 200PX and FF as 220PX, so how on earth did it cause the problem? If you remove the xml from the top of the container, you will find that this is the original problem, and the statement at the top triggers the qurks mode of IE.

16. Why can't IE set scroll bar color in web standard?

The solution is to replace body with html:

17. Why doesn't the style I define work?

Here you can't use .aa to define how to solve this situation in li. The answer is to increase the priority of .aa.

Web Standard frequently asked questions web Standard frequently asked questions

18. Why can't you define a container about the height of 1px?

This problem under IE6 is caused by the default row height, and there are many solutions, such as:

Overflow:hidden | zoom:0.08 | line-height:1px

19. Why can't this background color be displayed?

Web Standard FAQ Daquan web Standard FAQ Daquan web Standard FAQ web Standard FAQ

20. How can we make the layer appear on the FLASH?

The workaround is to set transparency for FLASH:

21. How to center a layer vertically in the browser

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

22. The picture is perpendicular to the container

Or use the background map:

Background:url ("logo.gif") center no-repeat

23. How to make div arrange horizontally

Horizontal arrangement of DIV can use floating methods such as float:left, or set the object to inline, but also can absolutely position the object, and so on.

This is the end of the common questions about FireFox and IE compatible CSS. I hope the above content can be of some help and learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.