Cross-browser development experience (2) -- CSS

Document directory

• CSS-level hack
• CSS Attribute-level hack
• HTML code snippet-level hack (ie Only)
• Set the Style of the element
• Set the class attribute of an element
• Hover the mouse over the button to show the shape of the hand
• Display of the window scroll bar
• Line-height attribute
• Display: inline-block
• Automatic Text wrapping in Div
• Automatic Text wrapping in textarea

CSS hack-level hack

Only IE7 recognition * + HTML {...}

Identification of * HTML {…} under IE6 and IE6 {...}

Opera, Safari, and chrome recognition:

@ Media all and (min-width: 0px ){...}// Firefox3.0.6 is not recognized, but firefox3.6This rule is also recognized. If the Firefox version has strict requirements, use the next rule.

@media screen and (-webkit-min-device-pixel-ratio:0){...}// IE,FirefoxThis rule is not recognized

Only opera recognition:

@media screen and (-webkit-min-device-pixel-ratio:10000)，not all and (-webkit-min-device-pixel-ratio:0{...}

CSS Attribute-level hack

Only ie recognition: margin-left: 10px \ 9;

Only IE8 recognition: margin-left: 10px \ 0;

IE6/IE7 recognition: * margin-left: 10px;

Only IE6 recognition: _ margin-left: 10px;

Examples of CSS hack synthesis:

/** Add 'margin-top:-10px; 'For IE7/Firefox/Opera/Safari/chrome, 'margin-top: 5px;' For IE8 **/

. News_list01 H2 span {float: Right; margin-top: 5px; * margin-top:-10px; display: inline}

@ Media all and (min-width: 0px ){

. News_list01 H2 span {float: Right; Height: 19px; margin: 0 0 0 0; padding-top: 16px; padding-bottom: 0; display: inline}

}

HTML code snippet-level hack (ie Only)

① <! -- [If! IE]> code snippets that can be identified except ie <! [Endif] -->

② <! -- [If IE]> all codes that can be recognized by IE <! [Endif] -->

③ <! -- [If IE 7]> only code snippets that IE7 can recognize <! [Endif] -->

④ <! -- [If lt IE 7]> code snippets that can be identified by IE7 and earlier versions <! [Endif] -->

⑤ <! -- [If gte ie 7]> code snippets that can be identified by IE7 and later versions <! [Endif] -->

Set CSS attributes with scripts to set the Style of Elements

VaR spanelement = Document. getelementbyid ("myspan ");

//The following statement ensures thatIEAll browsers are available.

Spanelement. setattribute ("style", "font-weight: bold; color: red ;");

//The following statement guaranteesIEAvailable

Spanelement.style.css text = "font-weight: bold; color: red ;";

Set the class attribute of an element

VaR element = Document. getelementbyid ("myelement ");

//The following statement guarantees thatIEAll browsers are available.

Element. setattribute ("class", "styleclass ");

//The following statement guaranteesIEAvailable

Element. setattribute ("classname", "styleclass ");

Implementation of the specific CSS effect when the button is hovering, the mouse shows the shape of the hand

The cursor: Hand cursor: pointer effects are the same. When the mouse moves to this element, the shape of the hand is displayed. However, you should try to use cursor: pointer instead of cursor: hand, because cursor: Hand is only recognized by IE, and cursor: pointer is the standard attribute of css2.0, which is also supported by browsers other than IE.

Display of the window scroll bar

When a pop-up window or frame window is used, there are sometimes redundant scroll bars. At this time, you need to confirm from multiple aspects:

1. Whether scroll = yes is defined for the window style set in window. Open method parameters in the pop-up window.
2. Whether scrolling = "yes" is set in the framework label attribute"
3. Whether HTML or body overflow is defined in CSS on the page of the window or framework. If not, refer to the following code.

HTML {

Margin: 0;

Padding: 0;

Overflow-X: hidden;

Overflow-Y: hidden;

}

Line-height attribute

Line-height refers to the distance between the baseline of the text line, that is, the distance between the bottom of the font and the top of the font. As shown in:

The blank distance (line spacing) between texts is not only determined by the row height, but also by the font size. Sometimes the bottom sides of different elements in the same row are not aligned, which may be caused by inconsistent Row Height. In this case, it is not enough to adjust the height and alignment mode. You also need to adjust the line-height attribute.

Display: inline-block

The display attribute has three values: Block, inline, and inline-block. Display: block indicates that an element is displayed as a block-level element. display: inline indicates that an element is displayed as a row element. display: inline-block indicates that an object is submitted as an inline object, however, the object content is presented as a block object. The Inline object next to it will be presented in the same row.

L block elements are characterized by: Always starting on a new line; height, row height, and top and bottom margins can be controlled; the default width is 100% of its container unless a width is set. <Div>, <p>,

L The Inline element has the following characteristics: it is on one line with other elements; the height, the row height, the top and bottom margins cannot be changed; the width is the width of its text or image and cannot be changed. <Span>, <A>, <label>, <input>, , <strong>, and <em> are examples of inline elements. The default value of the display attribute is inline.

L features of inline-block elements: the elements are displayed as inline objects, and the surrounding elements are kept in the same row. However, attributes of the width and height of the block elements can be set, currently, IE8, firefox3, opera, and Safari support this attribute.

Automatic Text wrapping in Div

Currently, the following CSS is used to control the line feed:

Div. Content {

Word-wrap: Break-word;

Overflow: hidden;

}

There is no problem in IE, Firefox, Safari, and chrome, but in opera, long strings of English will be overwritten. If you want to enable a long string of English characters to automatically wrap the line, you also need to set word-break: Break-all; (however, this method will cause the words in Common English statements to be broken, IE ). In terms of typographical rules, English words should not be broken. long strings of English characters are actually a long word, and naturally do not need to be broken to display line breaks, therefore, you do not need to set word-break: Break-all ;.

Automatic Text wrapping in textarea

Set the automatic line feed of the input content in textarea, and also set the word-wrap: Break-word; attribute in CSS. Note that the textarea element itself has a warp attribute. Its value is as follows:

L off: Do not wrap automatically;

L hard: automatically press enter to wrap the line, and the line feed mark is transmitted to the server together (not transmitted under opera or chrome );

L soft: Automatic soft carriage return line feed, line feed mark will not be transmitted to the server side.