CSSer, like other IT positions, will face questions asked by the interviewer or test papers given when looking for a job. Today we have collected 8 common interview questions, I hope they will be helpful to you.
1. The hover style does not appear after clicking the hyperlink?
The clicked hyperlink style no longer has the hover and active styles. The solution is to change the order of CSS attributes: LVHA
2. IE6’s 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> |
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 Firefox 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 browser scroll bar color be set 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 replace the body with html
5. How to 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.chinaz.com/">:</a> <pre lang="html" line="1"> <param name="wmode" value="transparent" /> |
7. How to center a div 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 using negative values outside the patch. 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 browser
Assume the following situation:
<div id="a"> <div id="b"> </div> </div> |
If you want to center b within a, 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;