Nowadays, when relevant units are recruiting artists, they all require knowledge of DIV CSS layout. Here are the eight interview questions that DIV CSS is most likely to encounter. I hope it will be helpful to you.
1. The hover style does not appear after the hyperlink is accessed?
The clicked hyperlink style no longer has hover and active. The solution is to change the order of CSS attributes: LVHA
2. Double margin bug in IE6
For example:
<style type="text/css">
body {margin:0;}
div {float:left; margin-left:10px; width:200px; height:200px; border:1px solid red;}
</style>
After floating, the original margin is 10px, but IE interprets it as 20px. The solution is to add display:inline
3. Why can’t the text in FF expand the height of the container?
Containers with fixed height values in standard browsers will not be stretched like in IE6. So if I want to have a fixed height and be stretched, what settings should I make? The solution is to remove the height and set min-height:200px; here, in order to take care of IE6 who does not know min-height, it can be defined like this:
div { height:auto!important; height:200px; min-height:200px; }
4. Why can’t IE set the scroll bar color according to web standards?
Original style settings:
<style type="text/css">
body { 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>
The solution is to replace the body with html
5. Why can’t I define a container with a height of about 1px?
This problem under IE6 is caused by the default line height, and there are many solutions, such as: overflow:hidden | zoom:0.08 | line-height:1px
6. How to make the layer display on FLASH?
The solution is to set transparency for FLASH:
<a href=" http://www.easyq.net.cn/">:</a >
<pre lang="html" line="1">
<param name="wmode" value="transparent" />
7. How to vertically center a layer in the browser?
<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>
Here we use percentage absolute positioning, and the method of negative outer patch, negative