8 frequently encountered problems with Div page layouts

Today, the construction station teaching network collected the use of CSS often encountered 8 problems, I hope to help you.

One, hyperlinks click after the hover style does not appear the problem?

The hyperlink style accessed by the clicked no longer has the hover and active style, the workaround is to change the order of the CSS properties: l-v-h-a

Second, IE6 margin double margin bug problem

For example:

<style type= "Text/css" >
body {margin:0;}
div {float:left; margin-left:10px; width:200px; height:200px; border:1px solid red;
</style>

Float after the original outside distance of 10px, but IE interpreted as 20px, the solution is to add display:inline;

Third, why the text in Firefox browser can not open the height of the container?

Standard browser fixed height value of the container is not as IE6 as the open, then I want to fixed height, but also want to be able to be stretched how to set it? method is to remove the height set min-height:200px; Here to take care of the IE6 that don't know min-height can be defined like this:

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

Why can't I set the Internet Explorer scroll bar color in the Web Standard?

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

How to define a container with a height of about 1px?

IE6 This problem is due to the default row height caused by the resolution of a number of ways, such as: Overflow:hidden | zoom:0.08 | line-height:1px

Six, how to let the layer display in flash above it?

The solution is to set up transparency for flash:

<a href= "http://www.jzread.com/" >:</a>
<pre lang= "html" line= "1" >
<param name= "wmode" value= "Transparent"/>

Seven, how to make a div layer centered 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 you use a percentage absolute positioning, a method with a negative value for the outer patch, and a negative value divided by two for its width height.

The solution to the center problem of nested div tags in firefox browser

Assume the following:

<div id= "a" >
<div id= "B" > </div>
</div>
If you want to implement B centered in a, you typically only need to use CSS to set the Text-align property of a to center. This approach looks normal in IE, but in Firefox, B is left.

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