Home > Article > Web Front-end > Example explanation of css compatibility writing method

Example explanation of css compatibility writing method

零下一度Original: 2017-06-24 13:56:021162browse

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无效

.div1{
##*position:relative;
##-moz-background-size:50%;
##-
ms-content-zoom-limit- max:50%;
o
-box-shadow:5px10px20px#f0f;##}
##.
div2
##position:
absoulte
important
; #}
```
 
```
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 dc6dce4a544fdca2df29d5ac0ea9906b under the 6c04bd5ca3fcae76e30b72ad730ca86d tag, then specify a class for the div, and then design the CSS like this: #container{ min-width: 600px; width:expression(document.body.clientWidth d37796e1253534fc014fdf45a10080aa
961dd75297247cb17f67e6948fb0666816b28748ea4df4d9c2150843fecfba68
2f2ff34e01cede92ca72f5915aa0a53f16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68

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:

e4acf4457cd2dcf6743269aee2ac6992
c321ef1fa01b31fde2d6c964d94c349316b28748ea4df4d9c2150843fecfba68
2e80957d70bf614c5390c2422aae5ab116b28748ea4df4d9c2150843fecfba68
d12f819607ea571af65bb02cafd068f416b28748ea4df4d9c2150843fecfba68

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; }
03452ba08ff5f2baed812ddc32be8187Content in the p object94b3e26ee717c64999d7867364b1b4a3
16b28748ea4df4d9c2150843fecfba68
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!

Statement：

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

Previous article：Detailed explanation of React quick-start scaffolding create-react-appNext article：Detailed explanation of React quick-start scaffolding create-react-app

See more

Example explanation of css compatibility writing method

Related articles