CSS is perfectly compatible with general methods of IE6, IE7, and FF (for your reference)

Source: Internet
Author: User

CSS compatibility with various browsers is already a common issue, and tutorials on the Internet are everywhere. The following content is not too novel. It is a personal summary and I hope it will be helpful for beginners.

I. CSS hack

The following two methods can solve almost all today's hack.

1 ,! Important

With IE7! Important Support ,! The important method is only for the hack of IE6. (note the writing method. Remember to advance the declaration position .)
# Wrapper
Width: 100px! Important;/* IE7 + FF */
Width: 80px;/* IE6 */
2, IE6/ie77 for Firefox

* + HTML and * HTML are unique tags of IE, which are not supported by Firefox at the moment. * + HTML is also a unique tag of IE7.
# Wrapper
# Wrapper {width: 120px;}/* Firefox */
* Html # wrapper {width: 80px;}/* IE6 fixed */
* + Html # wrapper {width: 60px;}/* IE7 fixed, pay attention to the Order */
* + The HTML hack for IE7 must ensure that the following statements are made on the top of the HTML:
<! Doctype HTML public "-// W3C // dtd html 4.01 transitional // en" http://www.w3.org/tr/html4/loose.dtd">


2. Universal float Closure

For details about the principle of clear float, refer to [How to clear floats without structural markup]
Set the followingCodeAdd class = "Clearfix" to the DIV to be closed in global CSS.
/* 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 */


Iii. Other compatibility skills

1. Setting padding for Div under FF will increase the width and height, but IE will not. (available! Important solution)
2. center problem.
1). Vertical center. Set line-height to the same height of the current Div, and then use vertical-align: middle. (Note that do not wrap the content .)
2). horizontal center. Margin: 0 auto; (of course not omnipotent)
3. To add a style to the content of tag a, set display: block)
4. The difference between FF and IE in understanding box leads to the 2px difference. There are also issues such as Div set to float and margin doubling under IE.
5. UL labels are listed-style and padding by default under ff. It is recommended to declare them in advance to avoid unnecessary troubles. (commonly seen in navigation labels and content lists)
6. Do not set the height of the external wrapper Div. It is best to add overflow: hidden to achieve highly adaptive.
7. about hand-shaped cursor. cursor: pointer. And hand only applies to IE.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.