Common errors of div css, compatibility methods, etc._html/css_WEB-ITnose

Common mistakes

1. Check whether the HTML element has spelling errors and whether the closing tag is forgotten

Even veterans often make mistakes in the nesting relationship of divs . You can use Dreamweaver's verification function to check for errors.

　2. Check whether the CSS is correct

　Check whether there are any spelling errors, whether you forgot the ending }, etc. You can use CleanCSS to check CSS for spelling errors. CleanCSS is a tool to reduce weight for CSS, but it can also check for spelling errors.

　3. Determine where the error occurred

If the error affects the overall layout, you can delete the div blocks one by one until the display returns to normal after deleting a certain div block, then you can determine where the error occurred. Location.

4. Use the border attribute to determine the layout characteristics of the error element

Using the float attribute for layout may cause errors if you are not careful. At this time, add the border attribute to the element to determine the element boundary, and the cause of the error will be revealed.

5. The parent element of a float element cannot specify the clear attribute

If you use the clear attribute on the parent element of a float element under MacIE, the layout of the surrounding float elements will be confused. This is a famous bug of MacIE. If you don't know it, you will take detours.

6. Float elements must specify the width attribute

Many browsers have bugs when displaying float elements without specified width. So regardless of the content of the float element, the width attribute must be specified for it.

In addition, try to use em instead of px as the unit when specifying elements.

7. Float elements cannot specify attributes such as margin and padding

IE has a bug when displaying float elements with margin and padding specified. Therefore, do not specify margin and padding attributes on float elements (you can nest a div inside the float element to set margin and padding). You can also use hacks to specify special values ​​for IE.

8. The sum of the widths of float elements must be less than 100%

If the sum of the widths of float elements is exactly 100%, some ancient browsers will not display properly. Therefore, please ensure that the sum of the widths is less than 99%.

9. Have you reset the default style?

Different browsers have different interpretations of certain attributes such as margin, padding, etc. Therefore, it is best to set all margin and padding to 0, list style to none, etc. before development.

　10. Did you forget to write the DTD?

If the display results of different browsers are still different no matter how you adjust it, then you can check whether you forgot to write the following line of DTD at the beginning of the page:

　 Commonly used tools

　1. Notepad.exe notepad, (small program, easy to edit manually at any time, Less junk code, no visual preview)

2.Dreamweaver (old web page editing tool, full-featured, relatively large program)

3..editplus (should be an upgraded version of the notepad tool, Code editing has color tips)

4. Notepad (a very unique editor, open source software, supports multiple development languages)

5. Ultraedit (a set of powerful text editors) Editor)

6. Golive (a product that will replace Dreamweaver in the future)

7. Topstyle (it has quite a few functions, and comes with a CSS code checking function to reduce the chance of writing errors. Especially its The detailed introduction of CSS instructions in the HELP file is very suitable for use as a reference document and for learning by people who are new to CSS)

Compatibility method

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 between FF and IE7 , IE6: background:orange;*background:green !important;*background:blue;

IE7, IE8 compatible:

　HEAD

　1. Several browsers in CSS support different keywords, which can be repeatedly defined for browser compatibility! important can be recognized by FireFox and IE7* Yes Recognized by IE6 and IE7_ Recognized by IE6* Recognized by IE7

　2. IE-specific conditional comments

　3. Several browsers have different opinions on the actual Explanation of pixels IE/Opera: Actual width of object = (margin-left) width (margin-right) Firefox/Mozilla: Actual width of object = (margin-left) (border-left-width) (padding- left) width (padding-right) (border-right-width) (margin-right)

4. Mouse gesture problem: FireFox’s cursor attribute does not support hand, but it supports pointer, and IE supports both; so for compatibility, pointer is used

5. When setting the Style attribute of the HTML tag in FireFox , all position, width, height and size values ​​must be followed by px. IE also supports this writing method, so the px unit is added uniformly. For example, Obj.Style.Height = imgObj.Style.Height 'px';

6. FireFox cannot parse the abbreviated padding attribute setting, 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 eliminating the indentation of lists such as ul and ol, 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. CSS control transparency: IE: filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60); FireFox ：opacity:0.6;

9. CSS control rounded corners: IE: does not support rounded corners; 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 bump 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 cursor style file and scroll bar color style; FireFox does not support the above two

12. IE has a bug where the Select control is always on top, and all CSS does not work on the Select control

13. IE supports Label tags in Form, including pictures and text content; FireFox does not support including pictures Label, clicking the picture will not cause the Radio or CheckBox labeled label for to have an effect

　14. TextArea in FireFox does not support the onScroll event

　15. FireFox does not support inline and block of display

16. When FireFox sets margin-left and margin-right to auto on Div, it is already centered, but it does not work in IE

17. When FireFox sets text-align on Body, Div needs to set margin: auto( Mainly margin-left margin-right) can be centered

18. It is best to set the CSS style of hyperlinks in this order: L-V-H-A. That is, This can be avoided Some hyperlinks that have been visited no longer have hover and active styles

19. To set automatic line wrapping for long paragraphs in IE, set word-wrap:break-word in CSS; use JS insertion method in FireFox to achieve this , the specific code is as follows:

　20. In the sub After adding the floating attribute to the container, the container will not be able to open automatically. Solution: Add a CSS clear: both;

to the next label after the label ends. 21. IE6 explains the margins after floating Solution to double the actual margin: add display:inline

22. There will be a gap below the image under 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 also float float:left or define margin-right:-3px relative to IE6;

24. How to display ellipsis when the content in LI exceeds the length (only applicable to IE)

　25. Set the height and line height of the element to The same value will center the text vertically

　26. To align the text and text input box, you must add vertical-align:middle; attribute setting in CSS

　29. IE6 cannot define a container with a height of about 1px due to the default line height problem. Solution: adjust the height in CSS Container settings such as: overflow:hidden | zoom:0.08 | line-height:1px

　30. Setting the transparent attribute to Flash can make the layer appear on top of Flash