Solution for setting the height to 1 px and other super-small heights to be not properly displayed in IE
According to the requirements of div css webpage layout, we sometimes need to set the container height to 1px. After setting, preview in IE is not set. It seems that the container is opened and cannot reach the desired minimum height.
In fact, this is caused by the high default line of IE, and there are many solutions. Below we illustrate the overflow: Den den, line-heigh methods.
Overflow: hidden minimum height
XML/HTML code
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> mb5u.com </title>
<Style type = "text/css">
# YourHomePage_com_cn {
Width: 100%;
Height: 1px;
Background: # c00;
Overflow: hidden;
}
</Style>
</Head>
<Body>
<Div id = "YourHomePage_com_cn">? </Div>
</Body>
</Html>
Line-height: Minimum height
XML/HTML code
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> mb5u.com </title>
<Style type = "text/css">
# YourHomePage_com_cn {
Width: 100%;
Height: 1px;
Background: # c00;
Line-height: 1px;
}
</Style>
</Head>
<Body>
<Div id = "YourHomePage_com_cn">? </Div>
</Body>
</Html>
The above part of the article from: http://www.mb5u.com/divcssjiaocheng/14307.html
Set Font size to height
XML/HTML code
<Div style = "height: 2px; font-size: 2px; background: #000000; width: 778px;"> & nbps; </div>
This method comes from: http://www.jb51.net/article/9279.htm
DIV height self-adaption-the use of min-height in CSS layout (compatible with IE and FF)
When a div + css page is used, the following problems are found: After adding a height to a div, if the content length exceeds the height defined by the div, in ie and aoyou, the div automatically drops. In firefox, the content overflows the div. If your div is added with a border, you will find that the content in firefox overflows. If you want to write a div whose height increases with the content and the div has the minimum height, you have to solve it.
If you are familiar with css, you may say that this is not a problem of Pediatrics? Isn't there a min-height in the css style sheet? Haha, if you are a div worker, you should find at work that IE and aoyou do not support this style at all, while firefox supports this style.
In fact, this problem is well solved. If you want to define a div with a minimum height of 600px, you can write it like this:
CSS code
{Height: auto! Important; height: 600px; min-height: 600px ;}
The div has a minimum height in both IE and firefox, and the height will adapt to the length of the content.
Author: "shirlly"
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
