Summary CSS Firefox browser and IE compatible code compatible with your main compatibility is the syntax of the problem, you write CSS write specifications, and are compatible, the other is some of the browser's BUG, send some tips for you Look, maybe useful.
CSS skills
1, the vertical center of the div problem
vertical-align: middle; Increase the line spacing as high as the entire DIV line-height: 200px; Then insert the text to center vertically. The disadvantage is to control the content do not wrap
2, the problem of doubling the margin
Div set to float in the margin set under ie will be doubled. This is a ie6 there are bugs. The solution is to add display: inline in this div;
E.g:
<#div id = "imfloat">
The corresponding css is #IamFloat {
float: left;
margin: 5px; / * IE understood as 10px * /
display: inline; / * Re-understand under IE 5px * /}
3, floating ie double the distance generated
margin: 0 0 0 100px; / / This case IE will produce a distance of 200px display: inline; / / float to ignore}
Here are two details of the block and inline elements: The characteristics of the block element is always the beginning of a new line, height, width, height, margins can be controlled (block element); Inline element is characterized by, and other Elements on the same line, uncontrollable (inline elements);
#box {display: block; / / can be embedded element simulation as a block element display: inline; / / Achieve the same row arrangement effect diplay: table;
4, IE and the width and height of the problem
IE does not recognize min-this definition, but in fact it treats normal width and height as min. This is a big problem. If you only use width and height, the normal values in the browser will not change. If you use only min-width and min-height, then IE is basically equal to not set the width and height.
For example, to set the background image, this width is more important. To solve this problem, you can do this:
#box {width: 80px; height: 35px;} html> body #box {width: auto; height: auto; min-width: 80px; min-height: 35px;}
5, the minimum width of the page
min -width is a very handy CSS command, it can specify the minimum element can not be less than a certain width, so that we can guarantee the layout has been correct. But IE does not recognize this, and it actually makes width as the minimum width to use. To make this command work on IE, put a <div> under the <body> tag, then assign a class to the div, and the CSS is designed like this:
#container {min-width: 600px; width: expression (document.body.clientWidth <600? "600px": "auto");}
The first min-width is normal; but the width of line 2 uses Javascript, which is recognized only by IE, which also makes your HTML documentation less formal. It actually implements the minimum width through Javascript's judgment.
6, DIV floating IE text to produce 3-pixel bug
The object on the left floats, the right uses the left margin of the outer patch for positioning, and the text on the right object will be 3px from the left.
#box {float: left; width: 800px;}
#left {float: left; width: 50%;}
#right {width: 50%;}
* html #left {margin-right: -3px; // This is the key}
<div id = "box">
<div id = "left"> </ div>
<div id = "right"> </ div>
</ div>
7, IE hide and seek question
When the div is complicated to use when there are some links in each column, DIV, etc. This issue prone to hide and seek.
Some content does not show up, when the mouse to select this area is found that the content is indeed in the page. Workaround: Use the line-height property for #layout or use a fixed height and width for #layout. The page structure as simple as possible.
8, float div closed; clear floating; adaptive height;
① For example: <# div id = "floatA"> <# div id = "floatB"> <# div id = "NOTfloatC"> NOTfloatC here does not want to continue panning, but instead desires to go down. (Of which floatA, floatB properties have been set to float: left
This code is no problem in IE, the problem lies in the FF. The reason is that NOTfloatC is not a float tag, and the float tag must be closed. In the <#div class = "floatB"> <#div class = "NOTfloatC"> with the "#div class =" clear "> This div must pay attention to the location, and must be with the float with two div Level, there can be no nested relations, otherwise it will produce anomalies. And clear this style is defined as follows: .clear {clear: both;}
② as an external wrapper div do not dead height, in order to allow the height to automatically adapt to wrapper inside with overflow: hidden; When the box contains a float, the height automatically adapt to invalid under IE, this time should trigger the IE Layout private property (evil IE ah!) With zoom: 1; can be done, so as to achieve compatibility.
For example, a wrapper is defined as follows:
.colwrapper {overflow: hidden; zoom: 1; margin: 5px auto;}
③ For typesetting, we use the most css description may be float: left. Sometimes we need to be in the n-column float div behind to make a unified background, for example:
<div id = "page">
<div id = "left"> </ div>
<div id = "center"> </ div>
<div id = "right"> </ div>
</ div>
For example, we want to set the background of the page blue, in order to achieve the background color of all three columns is the purpose of blue, but we will find that as left center right down elongated, and page actually save the same height, the problem The reason is that the page is not a float property, and our page due to be centered, can not be set to float, so we should solve this <div id = "page">
<div id = "bg" style = "float: left; width: 100%">
<div id = "left"> </ div>
<div id = "center"> </ div>
<div id = "right"> </ div>
</ div>
</ div>
Then embed a float left and width is 100% DIV solution
④ universal float closed (very important!)
The principle of clear float can be found in [How To Clear Floats Without Structural Markup]. Add the following code to Global CSS and try it out with class = "clearfix" for the div you want to close.
/ * 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 * /
Or set it like this: .hackbox {display: table; // show the object as a table of block element levels}
11, height does not meet
Height does not adapt when the height of the inner object changes the outer height can not be automatically adjusted, especially when the inner object using margin or paddign.
example:
#box {background-color: #eee;}
#box p {margin-top: 20px; margin-bottom: 20px; text-align: center;}
<div id = "box">
<p> Contents of p </ p>
</ div>
Workaround: Add 2 empty div objects up and down each P object. CSS code: .1 {height: 0px; overflow: hidden;} Or add a border property to the DIV.
12, IE6 why there is a gap under the picture
There are many ways to solve this bug, such as changing the layout of html or setting img to display: block or setting the vertical-align property to vertical-align: top | bottom | middle | text-bottom.
13, how to align the text and text input box
Plus vertical-align: middle
<style type = "text / css">
<! -
input {
width: 200px;
height: 30px;
border: 1px solid red;
vertical-align: middle;
}
->
</ style>
14, web standard id and class definition What is the difference?
One. Web standards is not allowed to repeat ID, such as div id = "aa" does not allow repeated 2 times, and class defines the class, in theory, can be infinitely repeated, so you need to use the definition of multiple references.
Second, the priority of the property ID priority than the class, see the above example
Third, to facilitate JS and other client-side script, if you want to script an object on the page, you can define an ID for him, or you can only use traversal page elements plus specify specific attributes to find it, which is relatively wasteful Time resources, far less than an ID easier.
15, LI content exceeds the length of the ellipsis after the show
This method works with IE and OP browsers
<style type = "text / css">
<! -
li {
width: 200px;
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
overflow: hidden;
}
->
</ style>
16, why web standard IE can not set the scroll bar color
The solution is to replace the body html
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta http-equiv = "Content-Type" c />
<style type = "text / css">
<! -
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;
}
->
</ style>
17, why can not define 1px around the height of the container
IE6 this problem is caused by the default line height, there are many solutions, for example: overflow: hidden | zoom: 0.08 | line-height: 1px
18, how can we let the layer above FLASH?
The solution is to set the FLASH transparent <param name = "wmode" value = "transparent" />
19, how to make a layer vertically centered in the browser
Here we use the method of absolute positioning with a percentage, negative with outer patch, the size of the negative value is the height of its own width divided by two <style type = "text / css">
<! -
div {
position: absolute;
top: 50%;
lef: 50%;
margin: -100px 0 0 -100px;
width: 200px;
height: 200px;
border: 1px solid red;
}
->
</ style>
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
