div css interview questions_html/css_WEB-ITnose

1. The problem that the hover style does not appear after a hyperlink is visited?

The hyperlink style that has been clicked and visited no longer has hover and active,

The solution is to change the order of CSS properties: L-V-H-A

2. IE6’s double margin BUG

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 fix the height and want it to be stretched, how should I set it up? The way is to remove he ight and set min-height:200px; here, in order to take care of IE6 that 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 in web standards?

Original style setting:

    <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 row 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 FLASH sets transparency:

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>

Percent absolute positioning is used here, and the method of externally patching negative values, the size of the negative value is its own width and height divided by two

8. Solution to the centering problem of nested div tags in Firefox

Assume the following situation:

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

If you want to implement b in a To place it in the center, you generally only need to use CSS to set the text-align attribute of a to center. This method looks normal in IE; but in Firefox, b will be on the 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;.