CSS detail set (2)

CSS detail set (2)
I. IE6 and the following do not recognize a tags: hover pseudo classes, which can be correctly achieved in Firefox and IE7. 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 the element

   Many IE6 (or IE7) problems can be solved by setting the hasLayout value. 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 height to 1%. If no height is set for the parent element, the physical height of the element does not change. However, the hasLayout attribute is available.

   3. Duplicate characters in IE6

   Make sure that the floating element has the display: inline;

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

   Iv. Style priority

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

   5. css coding for vertical center of 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:-100px;
   10. Margin-top:-52px;
   11. } 6. zoom: normal | number

       Sets or retrieves the scaling ratio of an object. Setting or changing the attribute value of a submitted object will result in the re-flow of the content of the surrounding object. Although this property cannot be inherited, it affects all sub-objects (children) of the object ). Frontend UI sharing

       7. When the image and text are side by side, the image text must be vertically centered:
       1. Set line-height to the image height or the height of the image parent element.
       2. Set the image CSS to vertical-align: middle; 8. When the li element contains the img element, the IE6 is blank.

          Solution 1:

          Float li and set img as a block-level element

          Solution 2:

          Set ul's font-size: 0;

          Solution 3:

          Set img vertical-align: bottom;

          Solution 4:

          Set the img margin-bottom:-5px;

          9. The hyperlink style accessed by clicking is not hover or active

          Solution: changing the order of CSS properties: L-V-H-A

          10. Continuous Long fields under FF cannot be automatically wrapped

          Solution:

          . Code
          1. Div {word-wrap: break-word; overflow: hidden;} the height of the parent container under 11 and FF cannot be adaptive.

             Solution: Clear the floating of child elements

             12. Gaps under IE slices

             Solution:

             • Define img as display: block, or vertical-align as top/bottom/middle/text-bottom
             • Defines that the font size of the parent container is zero. font-size: 0 13. There is a 3px gap between the floating element and its adjacent non-floating element in IE6.

               Solution:

               • Adjacent non-floating elements are also set to float;
               • Floating element relative to IE6 definition _ margin-right:-3px; 14. The LI content is displayed with a ellipsis after it is too long.

                 Solution: white-space: nowrap; (text does not wrap) text-overflow: ellipsis;-o-text-overflow: ellipsis; overflow: hidden;

                 15. text cannot be vertically centered

                 Solution: The line height and the container height are equal. line-height = height;

                 16. text input boxes and adjacent texts cannot be aligned

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

                 17. Set the scroll bar style for IE

                 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 with a height of 1px

                    Solution:

                    . Code
                    1. Div {
                    2. Overflow: hidden;
                    3. Zoom: 0.8;
                    4. Line-height: 1px;
                    5. }