1. Vertical center of Div
Vertical-align: middle; increases the line spacing to the same height as the entire Div
Line-Height: 200px; insert the text to center vertically. The disadvantage is that you need to control the content rather than line feed.
2. Question about doubling margin
The DIV set to float doubles the margin set in IE. This is a bug in IE6. The solution is to add the display: inline In the div;
3. Double distance produced by floating IE
# Box {float: Left; width: 100px;
Margin: 0 0 0 100px; // in this case, ie will generate a PX distance display: inline; // ignore floating}
Here, let's take a closer look at the block and inline elements: the block elements always start on a new line, and can be controlled by the height, width, row height, and margin (block element ); the Inline element is not controllable (embedded element) on the same line as other elements );
# Box {display: block; // The embedded element can be simulated as the block element display: inline; // you can arrange the same row.
Diplay: Table;
4 issues with IE and width and height
IE does not recognize the Min-definition, but in fact it treats normal width and height as Min conditions. In this case, the problem is big. If only the width and height are used, the values in the normal browser will not change. If only Min-width and Min-height are used, the width and height under IE are not set at all.
For example, to set a background image, the width is 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 ;}
4 issues with IE and width and height
IE does not recognize the Min-definition, but in fact it treats normal width and height as Min conditions. In this case, the problem is big. If only the width and height are used, the values in the normal browser will not change. If only Min-width and Min-height are used, the width and height under IE are not set at all.
For example, to set a background image, the width is 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 page width
Min-width is a very convenient CSS command, which can specify that the element is at least or less than a certain width, so as to ensure correct layout. But IE does not recognize this, but it actually
Width is used as the minimum width. To enable this command to be used on IE, you can put <div> in <body>
Label, specify a class for the DIV, and CSS is designed as follows:
# Container {Min-width: 600px;
Width: expression (document. Body. clientwidth <600? "600px": "Auto ");}
The first Min-width is normal, but the width of line 2nd uses JavaScript, which is recognized only by IE, which will make your HTML document not formal. It actually achieves the minimum width through javascript judgment.
6. The bug that DIV floating ie text produces 3 pixels
The left object floats, and the left margin of the outer patch is used to locate the patch on the right. The text in the right object is 3 px 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 critical}
<Div id = "box">
<Div
Id = "Left"> </div>
<Div id = "right"> </div>
</Div>
7. Questions about Internet Explorer
When the DIV application is complicated, there are some links in each column. When the DIV application is complicated, it is prone to the "hide and seek" issue.
Some content cannot be displayed. When you select this area, the content is displayed on the page. Solution: Use the line-height attribute for # layout.
Or use fixed height and width for # layout. The page structure should be as simple as possible.
8. Float Div closure; clear floating; adaptive height;
① Example: <# Div id = "floata"> <# Div id = "floatb"> <# Div
Id = "notfloatc"
> The notfloatc here does not want to continue translation, but to move down. (Floata and floatb attributes have been set to float: Left ;)
This code has no problem in IE, and the problem lies in ff. The reason is that notfloatc is not a float label and must be closed. In the <# Div
Add <# Div between class = "floatb"> <# Div class = "notfloatc">
Class = "clear"> This Div must be location-aware and must be at the same level as the two DIV with the float attribute. No nested relationship exists between them; otherwise, an exception occurs. And define the clear style as follows:
. Clear {clear: Both ;}
② As the external wrapper Div
Do not set the height. To make the height automatically fit, add overflow: hidden in wrapper;
When a box containing float is automatically adapted to the IE environment, the private attribute layout of IE should be triggered (the Internet Explorer !) Zoom: 1; can be used to achieve compatibility.
For example, a wrapper is defined as follows:
. Colwrapper {overflow: hidden; ZOOM: 1; margin: 5px
Auto ;}
③ For typographical layout, the most commonly used CSS description may be float: Left. Sometimes we need float in the N column.
DIV is followed by 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 to Blue to make the background color of all three columns blue, but we will find that with the left center
Right is stretched down, and the page storage height remains unchanged. The problem is that the page is not a float attribute, and our page cannot be set
Float, so we should solve it like 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>
Embed a float left and the DIV with a width of 100%.
④ Universal float closure (very important !)
For the principle of clear float, see [How to clear floats
Structural markup]: Add the following code to global CSS and add class = "Clearfix" to the DIV to be closed.
/* 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:. hackbox {display: Table;
// Display the object as a table at the block element level}
9. highly unsuitable
Height mismatch means that the height of the outer layer cannot be automatically adjusted when the height of the inner layer object changes, especially when the inner layer object uses margin or paddign.
Example:
# Box {background-color: # Eee ;}
# Box P {margin-top:
20px; margin-bottom: 20px; text-align: center ;}
<Div id = "box">
<P> content in the p object </P>
</Div>
Solution: Add two empty Div objects to the upper and lower sides of the P object. CSS code:. 1 {Height: 0px; overflow: hidden;} or add the border attribute to the div.
10. Why is there a gap in the image under IE6?
There are also many tips to solve this bug, which can be to change the HTML layout, set IMG to display: block, or set vertical-align.
The attribute vertical-align: Top bottom middle text-bottom can be resolved.
11. Align text and text input boxes
Add vertical-align: middle;
<Style
Type = "text/CSS">
<! --
Input {
Width: 200px;
Height: 30px;
Border: 1px solid red;
Vertical-align: middle;
}
-->
</Style>
12. What is the difference between ID and class defined in web standards?
I. Duplicate IDs are not allowed in web standards, such as Div
Id = "AA" is not allowed to repeat twice, while class is defined as a class. Theoretically, it can be repeated infinitely, so that you can use the definition of multiple references.
Ii. attribute priority
The priority of ID is higher than that of class.
III. convenience for JS and other client scripts. If you want to perform script operations on an object on the page, you can define an ID for it. Otherwise, you can only find it by traversing the page element and adding specific attributes, this is a relatively time-consuming resource, which is far less simple than an ID.
13. Tips for displaying the content in Li with ellipsis after the content length exceeds
This technique is applicable to IE and opbrowser.
<Style type = "text/CSS">
<! --
Li {
Width: 200px;
White-space: nowrap;
Text-overflow: ellipsis;
-O-text-overflow: ellipsis;
Overflow: hidden;
}
-->
</Style>
14. Why cannot I set the color of the scroll bar for IE in web standards?
The solution is to change the 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>
15. Why cannot I define a container with a height of around 1 px?
In IE6, this problem is caused by the high row by default, and there are many solutions, such as overflow: hidden ZOOM: 0.08.
Line-Height: 1px
16. How can I display layers on flash?
The solution is to make flash transparent.
<Param name = "wmode" value = "Transparent"
/>
17. How to center a layer vertically in the browser
Here we use the absolute percentage position, and the technique of negative external patch values. The negative value is the size of its own width and height divided by two
<Style type = "text/CSS">
<! --
Div {
Position: absolute;
Top: 50%;
Left: 50%;
Margin:-100px 0 0-100px;
Width: 200px;
Height: 200px;
Border: 1px
Solid red;
}
-->
</Style>
1. Div Center
Set margin-left and margin-Right to auto for div.
IE does not work. ie needs to set the body to center. First, define text-algin: center in the parent element. This means that the content in the parent element is centered.
2. Border and background of the Link (a tag)
Add the border and background color to the link. Set the display: block and
Float: left ensures no line feed. Refer to menubar to set the height of a and menubar to avoid misplacement of the bottom side. If no height is set
Insert a space in menubar.
3. Problems with the hover style after hyperlink access
The hyperlink styles that have been clicked and accessed are not hover and active. Many people may have encountered this problem. The solution is to change the order of CSS attributes:
L-V-H-A
Code:
<Style type = "text/CSS">
<! --
A: link {}
A: visited {}
A: hover {}
A: active {}
-->
</Style>
4. cursor
Cursor: pointer can display the cursor finger in IE ff at the same time,
Hand can only be IE
5. UL's padding and margin
UL labels have padding values by default in FF, while only margin has default values in IE, So we define
Ul {margin: 0; padding: 0;} solves most problems.
6. Form tag
In IE, this label will automatically margin some margin, while in FF, margin is 0. Therefore, if you want to display consistency, it is best to specify the margin and
Padding: For the above two problems, I usually use this style ul in CSS first, FORM {margin: 0; padding: 0;} to define it as dead, so it won't be a headache in the future.
7. Inconsistency of Box Model Interpretation
The box model interpretation in ff and IE is inconsistent, resulting in a 2px difference. Solution: div {margin: 30px! Important; margin: 28px ;}
Note that the order of the two margin values must not be reversed. The attribute IE of important cannot be recognized, but can be recognized by other browsers. So in IE, it is actually explained as follows:
If Div {maring: 30px; margin: 28px} is repeatedly defined, it is executed according to the last one. Therefore, you cannot write only margin: xx
Px! Important;
8. Attribute selector (this is incompatible and is a bug in hiding CSS)
P [ID] {} Div [ID] {}
This is hidden for versions earlier than ie6.0 and ie6.0, and works with ff and opera. there is a difference between the property selector and the Child selector. The range of the Child selector is reduced in the form, and the range of the property selector is relatively large, such as in P [ID, all P tags have IDs in the same style.
9. The most cruel means -! Important;
If there is no way to solve some detailed problems, you can use this technique. FF "! Important will automatically give priority to resolution, but IE will ignore it.
. Tabd1 {
Background: URL (/RES/images/up/tab1.gif) No-repeat 0px 0px
! Important;/* style for FF */
Background: URL (/RES/images/up/tab1.gif) No-repeat 1px 0px;/* style for IE
*/}
It is worth noting that XXXX must be added! Important is placed on the other sentence, which has been mentioned above
11. why can't the FF text support the height of the container?
Containers with fixed height values in the standard browser won't be opened as in IE6, so I want to fix the height and how can I set it to be supported? The method is to remove the height setting Min-
Height: 200px, which can be defined as follows to take care of IE6 without Min-height:
{
Height: Auto! Important;
Height: 200px;
Min-Height: 200px;
}
12. How to enable automatic line feed for continuous long fields in Firefox
It is widely known that IE is used directly.
Word-wrap: Break-word. In ff, we use js to insert
Skills to solve
<Style
Type = "text/CSS">
<! --
Div {
Width: 300px;
Word-wrap: Break-word;
Border: 1px solid red;
}
-->
</Style>
<Div id = "FF"> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </div>
<SCRIPT type = "text/JavaScript">
Function
Tobreakword (El, intlen ){
VaR OBJ = Document. getelementbyid (EL );
VaR
Strcontent = obj. innerhtml;
VaR strtemp = "";
While (strcontent. length> intlen)
{
Strtemp
= Strcontent. substr (0, intlen )"";
Strcontent = strcontent. substr (intlen, strcontent. Length );
}
Strtemp ="
"Strcontent;
OBJ. innerhtml = strtemp;
}
If (document. getelementbyid
&&! Document. All)
Tobreakword ("FF", 37 );
</SCRIPT>
13. Why is the container width and FF interpretation different under IE6?
<? XML version = "1.0" encoding = "gb2312"?>
<! 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">
<! --
Div {
Cursor: pointer;
Width: 200px;
Height: 200px;
Border: 10px solid red
}
-->
</Style>
<Div export nclick = "alert (this. offsetwidth)"> make Firefox compatible with IE </div>
The difference is whether the overall width of the container includes the Border width. Here, IE6 is interpreted as 200px.
And FF is interpreted as 220px. How is the problem caused? If you remove the XML at the top of the container, you will find that the original problem exists. The declaration at the top triggers the qurks of IE.
Mode, about qurks mode and standards
Mode knowledge, see: http://www.microsoft.com/china/msdn/library/webservices/Asp.net/
Aspnetusstan. mspx? MFR = true
IE6, IE7, FF
When ie7.0 came out, there were new problems with CSS support. More browsers, network BPX;/* For IE7 & IE6 */
_ Height: 20px;/* For IE6 */
Pay attention to the sequence.
This also belongs to CSS hack, but it is not as concise as above.
# Example {color: #333;}/* Moz */
* Html # example {color: #666 ;}/*
IE6 */
* Html # example {color: #999;}/* IE7 */
The second method is to use conditional annotations dedicated to IE.
<! -- Other browsers -->
<LINK rel = "stylesheet"
Type = "text/CSS" href = "css.css"/>
<! -- [If IE 7]>
<! -- Suitable for IE7
-->
<LINK rel = "stylesheet" type = "text/CSS" href = "ie7.css"/>
<! [Endif] -->
<! -- [If lte ie 6]>
<! -- Suitable for IE6 and later -->
<LINK rel = "stylesheet" type = "text/CSS" href = "ie.css"/>
<! [Endif] -->
Third, the CSS Filter method, which is translated from a foreign website as a classic ..
Create a CSS style as follows:
# Item {
Width: 200px;
Height: 200px;
Background: red;
}
Create a new Div and use the CSS style defined above:
<Div
Id = "item"> some text here </div>
Add the lang attribute in the body representation. The Chinese character is Zh:
<Body
Lang = "en">
Now define another style for the DIV element:
*: Lang (en) # item {
Background: Green! Important;
}
This is intended for use! Important overwrites the original CSS style. Because the Lang selector ie7.0 does not support this sentence, it does not have any effect on this sentence.
Ie6.0 has the same effect, but unfortunately safari does not support this attribute, so you need to add the following CSS style:
# Item: Empty {
Background: Green! Important
}
: The empty selector is a css3 specification. Although safari does not support this specification, this element is still selected, whether or not this element exists, now green will be available in browsers other than IE versions.
For compatibility with IE6 and FF, consider the previous! Important prefers the first method, which is concise and compatible.
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
