Summary of web front-end compatibility issues

1. Html object acquisition problem

Unified use: document.getElementById("idName");

2 , const problem

Unified use of var keyword to define

3. The problem of event.x and event.y

There is no page.x, page.y attribute under ie, there are x, y attributes

Under firifox, there are page.x, page.y attributes, but no x, y attributes

4, window.location.href problem

Use window.location instead of window.location.href.

5, frame problem

(1), access the iframe object

Unified use: window.document.getElementById("testFrame")

(2), switch iframe content

ie and ff:window.document.getElementById("testFrame").src = "xxx.html" or

window.frameName.location = "xxx.html" to switch the content of the frame

If you need to pass the parameters in the iframe back to the parent window, you can use the patent in the frame to access the parent window

parent.document.form1.filename.value = 'Aqing';

6. Modal and non-modal window issues

Open a new window directly using window.open(pageURL,name,parameters)

You can use window.opener in a child window to access the parent window

7. The difference between the parent elements of ff and ie

Unified use of obj.parentNode

8. Problems with document.form.Name.item('itemName')

Unified use: document.formName.elements['elementName'].

9. Collection class object problem

Unified use of [ ] to obtain collection class objects

10. Custom properties

Unity: getAttribute() gets custom attributes

11, event.srcElement problem

使用：srcObj = event.srcElement?event.srcElement:event.target;

12. Event delegation method

document.body.onload = new Function('inject()'); or document.body.onload = function(){/here is the code/}

13. Problems with table operations

IE is not allowed to assign values to the innerHTML of table and tr. When adding a tr with js, the appendChild method does not work.

var row = otable.insertRow(-1);

var cell = document.createElement("td");

cell.innerHTML = ""

cell.className = "xxx";

row.appendChild(cell);

Generally use the frame to operate the table

CSS

1. innerText works fine in IE, but not in Ff.

Solution:

if(navigator.appName.indexOf("Exploror") > -1){

　　document.getElementById("element").innerText = 'my text';

}else{

　　document.getElementById('element').textContent = "my text";

}

4. Width and padding in css

width in ie7 and ff does not include padding, in ie6 it includes padding.

5. The interpretation of ff and ie BOX models is inconsistent, resulting in a difference of 2px

box.style{width:100;border 1px}

ie:box.width = 100

ff: box.width = 100 + 1*2 = 102 (with border)

Solution: div{margin:30px!important;margin:28px}

6. The box interpretation of IE5 and IE6 is different

div{width:300px !important;width:/**/:340px;margin:0 10px 0 10px}

7. Eliminate ull and ol indentation problems

样式：list-style:none;margin:0px;padding:0px;

8. Horizontal centering:

ff:margin:0 auto;

ie: parent: {text-align:center}

9. Vertical centering of div

vertical-align: middle; line-height: 200px; Disadvantage: To control the content, it cannot wrap

10. Margin doubling problem

A div that sets float will double the margin set under ie. The solution is to add display:inline; in the div

11. IE and width and height issues

IE doesn't recognize min- this definition

#box{width:80px;height:35px;} html>body #box{width:auto;height:auto;min-width:80px;min-height:35px;}

12. The minimum width of the page

#container{min-width:600px;width:expression(document.body.clienWidth < 600?"600px":"auto")}

The first min-width is normal, and the width of the second line uses js, which is only recognized by IE, which will also make your HTML text less formal

13. div floating ie text produces a bug of 3 pixels

The object on the left is floating, the right side is positioned with an indeterminate left margin, and the text in the object on the right will be 3px from the left.

#box{float:left;width:800px}

#left{float:left;width:50%}

#right{width:50%}

#left{margin-left:-3px}

14. ie's hide-and-seek problem

When the div is complex, the div is prone to hide-and-seek problems

Solution: Use the line-height property or give a fixed width and height

15. The div of float is closed; the float is cleared, and the height is adaptive

（1）、<div id="floatA"> <div id="floatB"> <div id="NOTfloatC">

The c here wants to go down, you need to add <div class="clear"> between floatB and NOTfloatC

.cleat{clear:both;}

(2) Do not set the dead height of the div as an external wrapper. In order to make the height adaptive, add overflow:hidden to the wrapper; when the box contains float, the height adaptation is invalid under IE, and you should start at this time. IE's layout private property uses zoom: 1, which can achieve compatibility

.colwrapper{overflow:hidden;zoom:1;margin:5px auto;}

③For typesetting, the CSS description we use the most may be float:left. Sometimes we need to make a unified background behind the float div in n columns, for example:

</div>

For example, we want to set the background of the page to blue to achieve the purpose that the background color of all three columns is blue, but we will find that as the left centerright grows downward, the page actually keeps the height unchanged, the problem is coming , the reason is that page is not a float attribute, and our page cannot be set to float because it needs to be centered, so we should solve it like this:

</div>

Then embed a float left and a DIV with a width of 100% to solve it.

④Universal float closed (very important!)

For the principle of clear float, please refer to [How To ClearFloats Without Structural Markup], add the following code to Global CSS, and add class="clearfix" to the div that needs to be closed.

/* Clear Fix */
.clearfix:after { content:"."; display:block; height:0; clear:both;visibility:hidden; }
.clearfix { display:inline-block; }
/* Hide from IE Mac */
.clearfix {display:block;}
/* End hide from IE Mac */
/* end of clearfix */

Or set it like this: .hackbox{display:table; //Display the object as a table at the block element level}

16. Height discomfort

Height incompatibility is that when the height of the inner layer object changes, the outer layer height cannot be adjusted automatically, especially when the inner layer object uses margin or padding.

example:

#box { }
#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }
<div id="box">
<p>content in p object</p>
</div >

Solution: Add 2 empty div objects CSS code {height: 0px; overflow: hidden;} above and below the P object, or add a border attribute to the DIV.

17. There is a gap under the picture under IE6

There are many techniques to solve this bug, you can change the layout of html, or set img to display:block or set vertical-align property to vertical-align:top/bottom/middle/text-bottom.

18. Align text with text input boxes

add vertical-align:middle;

It has been verified that any version under IE is not applicable, and ff, opera, safari, and chrome are all OK!

19. If the content in LI exceeds the length, it will be displayed with an ellipsis

This trick is applicable to IE, Opera, safari, chrom browsers, FF does not currently support.

-->
</style>

20. Why can't IE set the scroll bar color in web standards

The solution is to replace the body with html

<!DOCTYPEhtml 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">

＜/style>

21. Why can't I define a container with a height of around 1px

Under IE6, this problem is caused by the default line height, and there are many solutions:

例如:overflow:hidden　 zoom:0.08 　line-height:1px

16. How can the layer be displayed on top of FLASH?

The solution is to set transparency to FLASH

<paramname="wmode" value="transparent" />

22. Link (a tag) border and background

A link adds border and background color, you need to set display: block, and set float: left at the same time to ensure no line break. Referring to the menubar, setting the height for a and menubar is to avoid the display of the bottom edge being misplaced. If the height is not set, you can insert a space in the menubar.

23. The problem that the hover style does not appear after the hyperlink is accessed

The style of the hyperlink that has been clicked and visited no longer has hover and active. Many people should have encountered this problem. The solution is to change the order of CSS properties: LVHA

Code:

24. FORM label

In IE, this label will automatically margin some margins, while in FF the margin is 0. Therefore, if you want to display consistent, it is best to specify margin and padding in css. For the above two problems, my css Generally, this style is first used in ul, form{margin:0;padding:0;}.

25. Attribute selector (this is not compatible, it is a bug that hides css)

p[id]{}div[id]{}

This is hidden for IE6.0 and versions below IE6.0, FF and OPera function. There is still a difference between attribute selectors and sub-selectors, the scope of sub-selectors is narrowed in terms of form, and the scope of attribute selectors is relatively large , such as p[id], all p tags with id are the same.

26. Why can't the text in FF stretch the height of the container

The container with a fixed height value in standard browsers will not be stretched like in IE6, then I want to fix the height and how to set it to be stretched? The solution is to remove the height and set min-height: 200px; here, in order to take care of IE6 who do not know min-height, it can be defined like this:

{
height:auto!important;
height:200px;
min-height:200px;
}

1. The size of the text itself is not compatible. The same is the font-size: 14px font-size: 14px, the space occupied by different browsers is different, ie actually takes up 16px high, the bottom is 3px high, ff is actually 17px high, the top is white 1px, and the bottom is left White 3px, under opera is even more different. Solution: Set line-height to text. Make sure all text has a default line-height value. This is important, we cannot tolerate a 1px difference in height.

2. The height of the container is limited under ff, that is, after the height of the container is defined, the shape of the container border is determined and will not be enlarged by the content, while under ie, it will be enlarged by the content, and the height restriction will be invalid. So don't easily define height for the container.

3. The problem of breaking the container in the horizontal direction. If the float container does not have a defined width, the content under ff will stretch the width of the container as much as possible, and under ie, the content will be wrapped first. Therefore, a floating container whose content may burst needs to define a width.

4. The most hated, double-margin bug. The actual effect of defining margin-left or margin-right for floating containers under ie6 is twice the value. The solution is to define display:inline for the floating container.

5.mirror margin bug, when there is a float element in the outer element, if the outer element defines margin-top: 14px, margin-bottom: 14px will be automatically generated. Similar problems will also occur with padding, which are all special products under ie6. The situation of this kind of bug is more complicated, and it is far from only this one condition, and it has not been systematically sorted out. Solution: Set border or float on outer element.

6. The phenomenon of swallowing. Still ie6, there are two divs up and down, the upper div sets the background, but it is found that the div below without the background also has the background, which is the phenomenon of swallowing. Corresponding to the above background swallowing phenomenon, there is also the phenomenon that the scroll lower border is missing. Solution: Use zoom:1. This zoom seems to be born specifically to solve the ie6 bug.

8. The blank under img, let's see what's wrong with this code:

Open the border of the div, you find that the bottom of the image is not close to the bottom of the container, it is caused by the blank characters behind img, to eliminate it must be written like this

The last two labels should be next to each other. This bug still exists under ie7. Solution: Set display:block to img.

9. Loss of line-height. <div style=”line-height:20px”><img />text</div>, unfortunately, the line-height effect of single-line text has disappeared under ie6. . . , the reason is that the <img /> inline-block element is written together with the inline element. Solution: Make both img and text float.

10.clear layer should be used alone. Maybe you put the clear attribute directly into a content layer below in order to save the code, this is a problem, not only the margin effect is lost under ff and op, but some margin values under ie will also be invalid
<div style=”background:red; float:left;”>dd</div>
<div style=”clear:both;margin-top:18px;background:green”>ff</div>

11.ie under overflow:hidden is invalid to its absolute layer position:absolute or relative layer position:relative. Solution: Add position:relative or position: absolute to overflow:hidden. In addition, ie6 supports the features of overflow-x or overflow-y, but ie7 and ff do not.

12. A serious bug in ie6, if the float element does not have a defined width, and if there is a div inside with height or zoom: 1 defined, the div will occupy a whole line, even if you give the width. If the float element is used as a layout or a complex container, it must be given a width.

13. The bug under ie6, the absolute positioning div contains the relative positioning div, if the inner relative positioning div is given a specific height, the inner relative layer will have a width value of 100%, and the outer absolute layer will be supported Big. The solution is to give the inner layer a float property relative to the layer.

14.width: 100% This thing is very convenient to use in IE. It will search for the width value layer by layer, ignoring the influence of the floating layer, and search under ff until the end of the floating layer. In this way, you can only add width to all floating layers in the middle: 100% is enough, tiring. Opera has learned to follow ie.

15. Sometimes adding the style of div{overflow:hidden} will make the three browsers the same