Cnblog Div + CSS layout common sense 8

Like other IT jobs, csser faces questions or exams raised by the interviewer when looking for a job. Today, 52css.com has collected 8 common interview questions. I hope this will help you.

I. Why is the hover style unavailable after a hyperlink is clicked?

The clicked accessed hyperlink style no longer has the hover and active style, the solution is to change the order of CSS properties: L-V-H-A

Ii. Bug in double margin of margin 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 external margin is 10px, but IE is interpreted as 20px. The solution is to add the display: inline;

 

 

3. Why can't text in Firefox support the height of containers?

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 Min-Height: 200px setting for height. 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 cannot I set the color of the IE browser scroll bar 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. How to define a container with a height of 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:

 

<A href = "http://www.chinaz.com/" >:</A> <PRE lang = "html" line = "1"> <Param name = "wmode" value = "Transparent"/>

7. How to center a div layer 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 nested Div labels in Firefox

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;