Collection of CSS details (2)_html/css_WEB-ITnose

1. IE6 and below do not recognize the :hover pseudo-class outside the a tag. The effect can be achieved correctly in Firefox and IE7. The solution:

. Code

1. #show li.s1{ border:1px solid #ff9900; background:#454242;}
2. #show li.s2{ border:1px solid #D9D8D8; background :#312E2E;}

2. Set hasLayout for elements

Many IE6 (or IE7) problems can be solved by setting the hasLayout value. To solve the problem, the simplest way to set the hasLayout value for an element is to add the CSS height or width (of course, zoom can also be used, but this is not part of CSS). For example, set it to height:1%. If the parent element does not set a height, the physical height of the element will not change, but it already has the hasLayout attribute.

3. Characters appear repeatedly in IE6

Make sure the floating element is set to display:inline;

Use margin-right:-3px in the floating element; front-end UI sharing

4. Style priority

1. Inline style [1.0.0.0]
2. ID selector [0.1.0.0]
3. Class, attribute, pseudo-class Selector [0.0.1.0]
4. Element tag, pseudo-element selector [0.0.0.1]

5. CSS writing method for vertically centering an element

.code

1. #exm{
2. position:absolute;
3. left:50%;
4. top:50%;
5. z-index:1;
6. width:200px;
8. height:100px;
9. margin-left:-10 0px ;
10. margin-top:-52px;
11. }

6. zoom: normal | number

Set or retrieve the zoom ratio of the object. Setting or changing the value of this property on an object that has been rendered will cause the surrounding object's content to reflow. Although this property is not inheritable, it affects all children of the object. Front-end UI sharing

7. When pictures and text are side by side, you need to vertically center the picture and text:

1. Set line-height: to the height of the picture, or the height of the picture's parent element .
2. Then set the CSS of the image to vertical-align:middle;

8. When the li element contains an img element, a blank

appears in IE6 Solution one:

Make li float and set img as a block-level element

Solution two:

Settings ul's font-size:0;

Solution three:

Set img's vertical-align: bottom;

Solution Four:

Set the margin-bottom of img: -5px;

9. The style of the hyperlink that was clicked does not have hover and active

Solution : Change the order of CSS attributes: L-V-H-A

10. Continuous long fields under FF cannot wrap automatically

Solution:

.code

1. div{word-wrap:break-word;overflow:hidden;}

ten 1. The height of the parent container cannot be adaptive under FF

Solution: clear the float of the child element

12. A gap is generated below the picture under IE

Solution:

Define img as display:block, or vertical-align as top/bottom/middle/text-bottom

Define the font size of the parent container as zero, font-size:0

13. There is a 3px gap between a floating element and its adjacent non-floating elements under IE6

Solution:

The adjacent non-floating elements are also floated;

Floating elements are defined relative to IE6_margin-right:-3px;

14. LI content is displayed with ellipses after being too long

Solution: white-space:nowrap;(text is not Line break) text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow: hidden;

15. The text cannot be vertically centered

Solution: line height and container height are equal to line -height=height;

16. The text input box and adjacent text cannot be aligned

Solution: Set the text input box vertical-align:middle; Front-end UI sharing

17. IE sets scroll bar style

Solution:

. Code

1. body{
2. scrollbar-face-color:#f6f6f6;
3. scrollbar-highlight-color:#fff;
4. scrollbar-shadow-color: #eeeeee;
5. scrollbar-3dlight-color:#eeeeee;
6. scrollbar-arrow-color:#000;
7. scrollbar-track-color:#fff;
8. scrollbar-darkshadow-color:#fff;
9. }

18. IE6 cannot define a container of 1px height 🎜>

Solution:

. Code

div{
overflow:hidden;
zoom:0.8;
line-height:1px;
}