Home > Developer > Web Develop
For web2.0, please try to write the code in XHTML format, and DOCTYPE affect the CSS processing, as the standard, must add DOCTYPE declaration.
Please refer to the following: CSS hack shows different effects for Ie6,ie7,firefox
Vertical centering problem for 1.div
Vertical-align:middle;
Increase the line spacing to as high as the whole Div line-height:200px;
Then insert the text and center it vertically. The disadvantage is to control the content not to wrap.
2. Question of margin doubling
A div set to float doubles the margin set under IE. This is a bug that exists in a IE6.
The solution is to add display:inline to this div;
For example:
< #div id= "Imfloat" >
The corresponding CSS is
#IamFloat
{
Float:left; Margin:5px;/*ie understood as 10px*/
Display:inline;/*ie to understand the 5px*/
}
3. Double the distance generated by the floating IE
#box {
Float:left; width:100px; margin:0 0 0 100px; In this case, IE will produce 200px distance display:inline; Make floating Ignore
}
Here's a look at the block and inline two elements:
The block element is characterized by always starting on new lines, height, width, row height, and margins can be controlled (block elements);
The inline element is characterized by an uncontrolled (inline element) on the same line as the other elements;
#box
{
Display:block; You can simulate an inline element as a block element
Display:inline; Effect of implementing the same row arrangement
diplay:table;
}
4 ie with width and height issues IE does not recognize the definition of min-, but in fact it treats the normal width and height as a condition of min. This problem is big, if only with the width and height, the normal browser of these two values will not change, if only with Min-width and min-height, ie, the following is not set width and height.
For example, to set the background image, this width is more important.
To solve this problem, you can:
#box {width:80px; height:35px;}
Html>body #box
{
Width:auto; Height:auto; min-width:80px; min-height:35px;
}
5. Minimum width of the page
Min-width is a handy CSS command that allows you to specify that the element should be minimal or less than a certain width, so that the layout is always correct. But IE doesn't recognize this, and it actually puts width as the minimum width. In order for this command to work on IE, you can put a <div> into the <body> tab, then specify a class for the Div, and then the CSS is designed like this:
#container {min-width:600px; Width:e-xpression (Document.body.clientWidth < 600?) "600px": "Auto");}
The first min-width is normal, but the width of line 2nd uses JavaScript, which only IE recognizes, which also makes your HTML document less formal. It actually achieves the minimum width by JavaScript's judgment.
6.DIV floating IE text generates 3 pixel bug
The left object floats, the right side is positioned with the left margin of the outer patch, and the text within the right object is spaced 3px away 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}
<div id= "box" >
<div id= "left" ></div>
<div id= "right" ></div>
</div>
7.IE Hide and seek problem
When the div application is complex, there are some links in each column, and the div is prone to hide-and-seek problems. Some content does not show up when the mouse selects this area is found content is indeed on the page.
Workaround:
Use the Line-height property for #layout or use fixed height and width for #layout. The page structure is as simple as possible.
8.float Div closed; clear floating; self-adapting height; ① such as:< #div id= "Floata" >< #div id= "FLOATB" >< #div id= "NOTFLOATC" > The NOTFLOATC here do not want to continue panning, but want to go down. (where the properties of Floata and FLOATB have been set to float:left;) This code is no problem in IE, the problem is in FF. The reason is that NOTFLOATC is not a float label and the float label must be closed. In < #div class= "FLOATB" > < #div class= "NOTFLOATC" > Add < #div class= "clear" > this div must pay attention to the position, And there must be no nested relationship with the two Div siblings with the float attribute, otherwise an exception will occur. And the clear style is defined as follows:. clear{Clear:both;}
Do not set dead height as an external wrapper div.
In order to allow the height can automatically adapt, to wrapper inside add Overflow:hidden; When the box containing float, the height of automatic adaptation in IE invalid, this time should trigger the layout of IE private property (evil ie Ah!). ) with zoom:1, can be done, so that the compatibility is achieved.
For example a certain wrapper is defined as follows:. colwrapper{Overflow:hidden; zoom:1; margin:5px Auto;}
9. For typesetting
The CSS description We use most probably is float:left. Sometimes we need to do a uniform background behind the float div in the n column,
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 to blue, in order to achieve the background color of all three columns is the purpose of blue,
But we'll find that as the left center is stretched downward, and the page actually holds the height unchanged, the problem comes,
The reason is that the page is not a float property, and our page cannot be set to float because it is centered.
So we should solve this problem:
<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 the width is 100% div solved
10. Universal Float Closure (very important!)
For the principle of clear float, see [How to clear floats without Structural Markup], add the following code to the global CSS, add class= "Clearfix" to the div that needs to be closed, Tried.
/* 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 */
Alternatively, set:. hackbox{display:table;//Display the object as a block-element-level table}
11. Highly non-adaptable
Height intolerance is when the height of the inner object changes, the outer height cannot be automatically adjusted, especially when the inner object uses margin or paddign.
Cases:
#box {background-color: #eee;}
#box p {margin-top:20px;margin-bottom:20px; text-align:center;}
<div id= "box" >
Content in the <p>p object </p>
</div>
Workaround:
Add 2 empty Div object CSS code to the P object:
.1{height:0px;overflow:hidden;} Or add the border attribute to the Div.
12. Why is there a gap in the picture under the IE6?There are a number of ways to solve this bug,
Can be a change in the layout of HTML,
or set IMG to Display:block
or set the Vertical-align property to Vertical-align:top | Bottom |middle |text-bottom can be solved.
13. How to align text with the input box
Plus vertical-align:middle;
<style type= "Text/css" >
<!--
input {width:200px; height:30px;border:1px solid red;vertical-align:middle;}
-
</style>
What is the difference between the definition ID and class in the 14.web standard ?
A. The Web Standard is not allow duplicate ID, such as div id= "AA" is not allowed to repeat 2 times, and class is defined by the classes, theoretically can be infinitely repeated, so that the definition of multiple references can be used.
Two. Attribute priority issue ID is higher than class, see the example above
Three. Convenient JS and other client-side script, if you want to script an object in the page, then you can define an ID, otherwise only by traversing the page element plus specify a specific attribute to find it, this is a relatively waste of time resources, far less than a simple ID.
The method of displaying an ellipsis after the content exceeds the length in LiThis method works with IE and op browser
<style type= "Text/css" >
<!--
Li {
width:200px;
White-space:nowrap;
Text-overflow:ellipsis;
-o-text-overflow:ellipsis;
Overflow:hidden;
}
-
</style>
16. Why IE cannot set scroll bar color in Web StandardThe solution is
Change body to 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" content= "text/html; charset=gb2312 "/>
<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't I define a container with around 1px height?
IE6 This problem is caused by the default row height,
There are many ways to solve it.
Example: Overflow:hidden | zoom:0.08 | line-height:1px
18. How can I make the layer appear above flash?
The workaround is to set the flash to transparent
<param name= "wmode" value= "Transparent"/>
19. How to make a layer vertically centered in the browser
Here we use the percent absolute positioning, with the method of negative value of the outer patch, the size of the negative value to its own width height divided by 2
<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>
Bugs in the browser CSS
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
