CSS browser compatibility and resolution

One, hover style does not appear after hyperlink access

1. Description of the phenomenon:

The a:visited and a:hover styles are also set, but once the hyperlink is clicked, the hover style is no longer present.

2. Solution:

Adjust the order of the styles to a:visited and a:hover first.

　　　　A label of four states sorted by: L (link) ov (visiter) e H (hover) A (active) te

Two, the line elements up and down margin and padding do not pull the element spacing

1. Description of the phenomenon:

The margin and padding of the elements in the row produce a margin effect in the horizontal direction, but the vertical direction has no effect.

(1) HTML code:

< Div > block-level elements </div><span> inline elements </  span>

(2) CSS code:

{    background: Gray;     padding: 20px;  }  {    background: green;     Padding: 20px;     margin: 20px;      }

2. Solution:

Set the inline element display to block or Inline-block.

(1) CSS code:

{    background: Green;       padding: 20px;     margin: 20px;     display: block/inline-block;}

Third, floating background:

To resolve a floating background, enter the following code in the appropriate location between

<style type= ' text/css ' >    <!--    {        background-image: url (image/ Bg.gif);         background-attachment: fixed;    }     --></style>

Four, list-style-image can not accurately locate the problem:

To resolve an issue where list-style-image cannot be accurately located, enter the following code in the appropriate location between

<style type= ' text/css ' >    <!--    {        list-style: url (' http://gluu5.163.com/ /e/11/6.gif ');    } {position: relative;                    Top: -5px;        font: 12px/25px the song body ;    }     --></style>

Five, set the color of the scroll bar:

To set the color of the scroll bar, enter the following code in the appropriate location between

 <style type= ' text/css ' > <!--html  { Scrollbar-face-color :  #F6F6F6 ;  Scrollbar-highlight-color :  #FFF000 ; Span style= "COLOR: #ff0000" > Scrollbar-shadow-color :  #EE00EE ;  Scrollbar-face-color :  #F6F6F6 ;  Scrollbar-3dlight-color :  #EE222E ;  Scrollbar-arrow-color :  #CCC000 ;  Scrollbar-track-color :  #DDEECC Scrollbar-darkshado    W-color: #FFFDDD ; }--></style>  

Six, innertext in IE normal, but in Firefox but not:

To resolve this issue requires textcontent:

(1) jquery code:

if (Navigator.appName.indexOf (' Explorer ') >-1) {    document.getElementById (' element '). InnerText = ' My Text ';   Else {    document.getElementById (' element '). textcontent = ' My text ';}

Vii. List indent issues for UL and OL:

Elimination of UL and OL list indentation problem, should be written as follows style:

{    padding: 0;     margin: 0;     list-style: none;}  {    padding: 0;     Margin: 0;     list-style: none;}

CSS browser compatibility and resolution