Example explanation of css compatibility writing method-HTML Tutorial-php.cn

Common browser kernel engines and specific applications:

Trident: IE;

Gecko: Firefox;

webkit: Safari, Google Chrome, Travel 3, Cheetah , Baidu;

Presto: Opera——Opera mini

Writing order: firefox, IE8, IE7, IE6

IE6:*,_

IE7:*,+

IE8:\9,\0

chrome:- webkit-

firefox: -moz-, root (only recognized by ff)

*and_, ie6 can recognize;
* , ie6, ie7 can recognize;
!important , indicating high priority, ie7 and above, firefox supports it, ie6 recognizes it !important style attribute, but does not know the priority of !important;
-webkit-, for safari, chrome browser kernel CSS writing method
-moz-, the CSS writing method for the firefox browser kernel
-ms-, the CSS writing method for the ie kernel
- o-, CSS writing method for Opera kernel

    如果只让ie6看见用        *html .head{color:#000;}
　　如果只让ie7看见用        *+html .head{color:#000;}
　　如果只让ff看见用:         root body .head{color:#000;}
　　如果只让ff、IE8看见用     html>/**/body .head{color:#000;}
　　如果只是不让ie6看见用     html>body .head{color:#000;} 即对IE 6无效
　　如果只是不让ff、IE8看见用 *body .head{color:#000;}    即对ff、IE8无效

Copy after login

.div1{
##*position:relative;
##-moz-background-size:50%;
##-
ms-content-zoom-limit- max:50%;
o
-box-shadow:5px10px20px#f0f;##}
##.
div2
##position:
absoulte
important
; #}
```
 
```
Copy after login
First question: Width issue
Give the div a width: 300px; padding: 10px;

Firefox

Actual width 320px, padding is filled in; support! important, IE ignores

IE6

The actual width is 300px, the padding is inside 300px, and the content is squeezed in;

of the page Minimum width

IE does not recognize min-, and it actually uses width as the minimum width. In order to make this command work on IE, you can put a

under the tag, then specify a class for the div, and then design the CSS like this: #container{ min-width: 600px; width:expression(document.body.clientWidth < 600? "600px": "auto" );}

The first min-width is normal; but the width in line 2 uses Javascript, which only Only IE can recognize it, which will also make your HTML document less formal. It actually implements the minimum width through Javascript judgment.

Second question: Horizontal centering problem

In IE, just set body{text-align:center;} so that it can be displayed in the center.

Firefox doesn’t work. Solution: body:{text-align:center;margin:0px auto;}

Third question: BOX model in mozilla firefox and IE Inconsistent explanations lead to a difference of 2px

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

Fourth question: CSS transparency issue

IE :filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60).

FF: opacity: 0.6.

[Note] It is best to write both and put the opacity attribute below.

The fifth question: rounded corners problem

IE: Versions below ie7 do not support rounded corners. FF: -moz-border-radius:4px

Browser bug IE’s double margin bug 
The margin set for a div set to float under IE will be doubled. This is a bug that exists in ie6. 
Solution: Add display:inline;

Floating

DIV floating IE text generation 3 in this div Pixel bug The left object floats, and the right edge is positioned using the left margin of the outer patch. The text within the right object will have a 3px spacing from the left.

#box{ float :left; width:800px;} #left{ float:left; width:50%;} #right{ width:50%;} *html #left{ margin-right:-3px ; //This sentence is the key}

IE hide-and-seek problem
When the div application is complex, in each column There are some links, DIVs, etc. It is easy for hide-and-seek problems to occur at this time.
Some content cannot be displayed. When the mouse selects this area, it is found that the content is indeed on the page. Solution: Use line-height attribute for #layout or use fixed height and width for #layout. Keep the page structure as simple as possible.

IE's layout private property

Do not set the height of the div as an external wrapper. In order for the height to automatically adapt, it must be inside the wrapper. Add overflow:hidden; when the box contains float, the height automatic adaptation is invalid in IE. At this time, the layout private attribute of IE should be triggered (the evil IE!) You can use zoom:1; to achieve this. Compatible.

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

Typesetting

We use The most common CSS description may be float:left. Sometimes we need to create a unified background behind the float div in column n, for example:

We want to set the background of the page to blue to achieve the purpose of having the background color of all three columns be blue, but we will find that with the left center right Stretch downwards, but the page actually retains the same height. The problem is that the page does not have a float attribute, and our page cannot be set to float because it needs to be centered, so we add a parent element to it, page, to become grandpa;

Height non-adaptation
Height non-adaptation means that when the height of the inner layer object changes, the outer layer height cannot be automatically adjusted, especially when the inner layer object When using margin or paddign.
Example:
#box { }
#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }

Content in the p object

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

Why is there a gap under the picture under IE6
There are many techniques to solve this BUG. You can change the layout of the html, or set the img to display: block or setting the vertical-align attribute to vertical-align:top , bottom , middle , text-bottom can be solved.

IE’s css bug

After adding spaces to p:first-letter and {font-size:300%}, that is, p:first-letter {font-size:300%}, the display becomes normal. But the same code looks normal under FireFox. Logically speaking, the way of writing p:first-letter{font-size:300%} is correct. So what's the problem? The answer is the hyphen "-" in the pseudo class. There is a BUG in IE. When processing pseudo-classes, if the name of the pseudo-class contains a hyphen "-", the name of the pseudo-class must be followed by a space, otherwise the style definition will be invalid. In FF, it can be processed normally with or without spaces.

The div is already centered when margin-left and margin-right are set to auto. IE does not work. IE needs to set the body to be centered. First define text-algin: center; this in the parent element It means that the content within the parent element is centered.

Vertical centering=>Content wrapping problem

A div with a height of 30px displays the upper left corner by default. If you want to center it vertically, you can add a line-height:30px; style. If you want it to be at the bottom, modify line-height

The larger the value, the lower. In order to prevent it from bursting, you need to give another style overflow:hidden;

Set three styles for block-level objects to solve the browser default value: width and height overfl

Tips for displaying ellipsis after the content in LI exceeds the length

This technique is applicable to IE and OP browsers

li {

##width:200px; white-space:nowrap;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
overflow: hidden;
}

Why IE cannot set scroll bars in web standards Color The solution is to replace the body with html

html { scrollbar-face-color:#f6f6f6;
scrollbar- highlight-color:#fff;
scrollbar-shadow-color:#eeeeee;
scrollbar-3dlight-color:#eeeeee;
scrollbar-arrow-color:#000;
scrollbar-track- color:#fff;
scrollbar-darkshadow-color:#fff;
}

Why can’t I define a container with a height of about 1px This problem under IE6 is caused by the default line height, and there are many solving techniques, such as: overflow:hidden zoom:0.08 line-height:1px

css initialization

The margin attribute is valid for IE, and the padding attribute is valid for FireFox.

body,div,dl,dt,dd,ol,h1,h2,h3,h4,h5,h6,form,input,p,th,td{margin :0;padding:0;}
##ul li {list-style:none;}
/* Clear Fix */

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 block element-level table}

Too many references:

The above is the detailed content of Example explanation of css compatibility writing method. For more information, please follow other related articles on the PHP Chinese website!

Related labels：

css ie compatibility Writing method Encyclopedia

source：php.cn

Previous article：Detailed explanation of React quick-start scaffolding create-react-app Next article：Introduction to replaceable and non-replaceable elements

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn