Home > Developer > JavaScript
[Web Front-end development] browser compatibility processing, web Front-end
1. center problem
Content in div. IE is centered by default, and FF is left aligned by default. You can try to add the code margin: 0 auto;
2. High Problems
The above div sets the height. If the actual content in the div is greater than the height, the two div overlaps in FF; however, in IE, the following div automatically gives space to the above div, so to avoid layer overlap, you must properly control the height, or simply leave the height unspecified so that it can be automatically adjusted, the better method is height: 100%. But when the first-level elements in the div are float, you need to add an empty div at the end of the div block and close it with the front, the corresponding CSS is :. float_bottom {clear: both; height: 0px; font-size: 0px; padding: 0; margin: 0; border: 0; line-height: 0px; overflow: hidden ;}
3. clear: both;
If you do not want to be float, Write clear: both in the div;
4. Double distance generated by IE floating margin
# Box {
Float: left;
Width: 100px;
Margin: 0 0 0 100px; // in this case, IE will generate a PX distance.
Display: inline; // ignore floating
}
5. padding Problems
After FF sets the padding, div will increase the height and width, but IE will not (* The standard XHTML1.0 defines the dtd as if it is consistent) the height control is appropriate, or try to use the height: 100%; the width is reduced by Using padding, but according to actual experience, the padding of FF and IE is not much different. The actual width of div is = width + padding, so div writes full width and padding, width is defined by subtracting the actual width from the padding value.
6. padding and marign on the Y axis during div nesting
In FF, the distance between the child div and the parent div on the y axis is parent padding + child marign.
In IE, the distance between the child div and the parent div on the y axis is a big one in the parent padding and the Child marign.
When the parent padding is 0 on the y axis of FF and the border is 0, the distance between the child div and the parent div is 0, and the Child marign acts outside the parent div.
7. Silly solutions for padding, marign, height, and width
Note that it is a skill, not a method:
Write the Standard Header
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/5o/xhtml">
Use padding as much as possible, use margin with caution, and add 100% for height as much as possible. The parent-level height has a fixed value. The child-level height does not need 100%. When the child-level is full, fill an empty clear at the bottom: use margin as much as possible for the div width of both, and use padding with caution. The width is equal to the actual value minus padding.
8. List type
1. ul labels have padding values by default in FF, while in IE, only margin has values.
First define ul {margin: 0; padding: 0 ;}
2. When ul and ol lists are indented to ul and ol lists, the style should be written as: {list-style: none; margin: 0px; padding: 0px ;}
9. display: block, inline)
1. display: block, inline two elements
Display: block; // you can simulate embedded elements as block elements.
Display: inline; // implement the same row Arrangement
Display: table; // for FF, simulating the table Effect
Display: block element, which has the following features:
Always start on a new line; height, line height, and top and bottom margins can be controlled; width is 100% of its container by default, unless a width is set
<Div>, <p>, Display: inline indicates that an element is displayed as an element in the row. The element features that the element and other elements are on the same row. Height, Row Height, top, and bottom margins cannot be changed; the width of a text or image cannot be changed. <Span>, <a>, <label>, <input>, , <strong>, and <em> are examples of inline elements.
2. Mouse-finger display
Cursor: pointer;
10. Background and Image
1. background display problems
Complete the width and height attributes.
2. Background transparency
IE: filter: progid: DXImageTransform. Microsoft. Alpha (style = 0, opacity = 60 );
IE: filter: alpha (opacity = 10 );
FF: ops: 0.6;
FF:-moz-opacity: 0.10;
It is best to write both of them and put the opacity attribute below
11. min-height (compatible with IE6, IE7, and FF)
The function is to maintain a minimum height when the container content is small, so as not to damage the layout or uidesign effect. When the content in the container increases, the container can automatically expand to adapt to content changes.
# Mrjin {
Background: # ccc;
Min-height: 100px;
Height: auto! Important;
Height: 100px;
Overflow: visible;
}
12. Famous Meyer Reset (Reset)
Html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td
{
Margin: 0;
Padding: 0;
Border: 0;
Outline: 0;
Font-weight: inherit;
Font-style: inherit;
Font-size: 100%;
Font-family: inherit;
Vertical-align: baseline;
}
: Focus {
Outline: 0;
}
Body {
Line-height: 1;
Color: black;
Background: white;
}
Ol, ul {
List-style: none;
}
Table {
Border-collapse: separate;
Border-spacing: 0;
}
Caption, th, td {
Text-align: left;
Font-weight: normal;
}
Blockquote: before, blockquote: after,
Q: before, q: after {
Content :"";
}
Blockquote, q {
Quotes :"""";
}
13. cross-browser CSS transparency
. Transparent {
Opacity: 0.7;
-Ms-filter: "progid: DXImageTransform. Microsoft. Alpha (Opacity = 70 )";
Filter: alpha (opacity = 70 );
-Moz-opacity: 0.7;
-Khtml-opacity: 0.7;
14. Text shadow (CSS3)
. Text {text-shadow: 1px 1px #666; filter: Shadow (Color = #666666, Direction = 135, Strength = 5 );}
15. Box shadow (CSS3)
. Box {box-shadow: 5px 5px #666;-moz-box-shadow: 5px 5px 5px #666;-webkit-box-shadow: 5px 5px 5px #666 ;}
16. Sticky Footer (let the Footer always stop at the bottom of the page, rather than based on the absolute position)
<Div id = "wrap">
<Div id = "main" class = "clearfix"> </div>
</Div>
<Div id = "footer"> </div>
CSS:
* {Margin: 0; padding: 0 ;}
Html, body, # wrap {height: 100% ;}
Body> # wrap {height: auto; min-height: 100% ;}
# Main {padding-bottom: 150px ;}
# Footer {
Position: relative;
Margin-top:-150px;
Height: 150px;
Clear: both ;}
. Clearfix: after {content :".";
Display: block;
Height: 0;
Clear: both;
Visibility: hidden ;}
. Clearfix {display: inline-block ;}
* Html. clearfix {height: 1% ;}
. Clearfix {display: block ;}
17. How to remove the inherited html and body background color/background image from the inner embedded area of the iframe element
The iframe element is used to embed a document in a document to create a floating frame. Embedded documents are a complete page with attributes such as HTML and BODY. In this case, if the style sheet defines the background color/background image for the BODY, all embedded documents will be inherited. So how to remove the background color and background image:
[1] Remove the background Color: filter: Chroma (Color = white );
Example: <iframe width = "100%" height = "400" marginwidth = "0" marginheight = "0" scrolling = "no" frameborder = "0" leftmargin = "0" topmargin =" 0 "> browser compatibility
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
