Let's take a look at a few questions about Div + CSS.

1. Why is the hover style unavailable after hyperlink access?

The hyperlink style accessed by clicking is not having hover and active, and the solution is to change the order of CSS attributes: L-V-H-A

2. Double margin bug of 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>

 

The external margin is 10px after floating, but IE is interpreted as 20px. The solution is to add the display: inline

　3. 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 "He ight" setting Min-Height: 200px. Here, we can define this to take care of IE6 that does not know Min-height:

 

div { height:auto!important; height:200px; min-height:200px; }

 

 

 

4. Why can't I set the color of the scroll bar for IE in 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 change the body to HTML.

5. Why cannot I define a container with a height of around 1 px?

In IE6, this problem is caused by the default Row Height, and there are many solutions, such as overflow: hidden | ZOOM: 0.08 | Line-Height: 1px.

6. How can I display layers on flash?

The solution is to set transparency for flash:

<Param name = "wmode" value = "Transparent"/>

7. How to center a layer vertically in a 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 the absolute percentage position. The negative value of the external patch is its own width and height divided by two.

8. Solution to the center problem of Firefox nested Div labels

Assume that the following conditions exist:

 

<div id="a">
　　<div id="b"> </div>
</div>

 

To center B in A, you only need to use CSS to set the text-align attribute of a to center. This method seems to be normal in IE, but in Firefox, B will be left.

The solution is to set the horizontal margin of B to auto. For example, set the CSS style of B to: margin: 0 auto ;.