As there are more and more browser developers, css tutorial compatibility is also a hot topic discussed by designers and webmasters. Below we summarize some css Compatibility Issues in use.
1. Vertical center of div
Vertical-align: middle; increase the line spacing to the line-height: 200px as high as the entire div; then insert the text to center vertically. The disadvantage is that do not wrap the control content
2. margin doubling problem
The matgin set for the div set to float in ie doubles. This is a bug in ie6. The solution is to add the display: inline in the div. For example:
<# Div id = "imfloat">
The corresponding css is
# Imflat
{
Float: left;
Margin: 5px;/* 10 px in ie */
Display: inline;/* in ie, it is understood as 5px */
}
3. Double distance of 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 we will elaborate on the two blocks in inline. The block element is characteristic that it always starts on a new line and can be controlled by the height, width, row height, and margin (block element ); the inline element is characteristic of being on a brave line with other elements and cannot be controlled (embedded element)
# Box
{
Display: block; // you can simulate embedded elements as block elements, and display: inline; // you can arrange the same row.
Display: table; // table element
}
4. Questions about the width and height of ie
Ie does not recognize min-, but uses normal width and height as min. In this case, the problem is big. If the height and width are used, the values in the normal browser will not change. If min-width and min-height are used, the width and height under ie are not set at all.
For example, if you want to set a background image, the width is important. You can solve this problem.
# 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 the minimum value of an element and cannot be smaller than the width. This ensures that the layout is correct, but it is not recognized in ie, but he actually uses width as the minimum width. To make this command be applied on ie, you can put <div> Under the <body> label, determine a class for the div, and then design the css as follows:
# Container
{
Min-width: 600px;
Width: expression (document body clientwidth <600? "600px", "auto ");
}
The first min-width is normal, but the width of the second line uses webpage special effects, which can only be recognized by ie, which will make your html document not formal, it actually achieves the minimum width through javascript judgment.
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
