internet explorer - IE not supporting some CSS3 styling -


i having problem ie. using css3 style on current project. on other browsers have tested on firefox, chrome , safari , looks amazing. on ie looks room(doesn't good).

i need advice please. know percentage of ie user days very low compare other browsers. question should rewrite css3 standard css ones doesn't support ie or should annoy , using php alert users contains might no looks right because of browser type , recommend them download, chrome or firefox?

an example of 1 of issue navigation bar.

<nav>     <ul>         <li>     <a href="">home</a>     </li>                    <li><a href="about.php">aboutus</a></li>                         <li><a href="contact.php">contact us</a></li>                        </ul>    </nav> 

css

nav{ text-align:center; } nav li{ text-align:center;list-style: none;    float: left; } nav ul ul {     display: none; }      nav ul li:hover > ul {         display: block;     }     nav ul {     z-index:50;     background: #ffffff;      background: linear-gradient(top, #ffffff 0%, #bbbbbb 100%);       background: -moz-linear-gradient(top, #ffffff 0%, #bbbbbb 100%);      background: -webkit-linear-gradient(top, #ffffff 0%,#bbbbbb 100%);      box-shadow: 0px 0px 9px rgba(0,0,0,0.15);     padding: 0 20px;     border-radius: 10px;       list-style: none;     position: relative;     display: inline-table; }     nav ul:after {         content: ""; clear: both; display: block;     }      nav ul li:hover {         background: linear-gradient(top, #ffffff 0%, #ffffff 40%);         background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 40%);         background: -webkit-linear-gradient(top, #ffffff 0%,#ffffff 40%);     }         nav ul li:hover {             color: #fff;          }      nav ul li {         display: block;          padding: 10px 10px;         text-transform: uppercase;         text-decoration: none;     }     nav ul li {     float: left; }          nav ul li:hover {             color: #760076;         }      nav ul li {         display: block;         color: #000000;         text-decoration: none;     }     nav ul ul {     border-radius: 0px; padding: 0;     position: absolute;      top: 100%; }     nav ul ul li {         float: none;          border-top: 1px solid #6b727c;         border-bottom: 1px solid #575f6a;         position: relative;     }         nav ul ul li {             color: #fff;         }                nav ul ul li a:hover {                 background: #ffffff;             }             nav ul ul ul {     position: absolute;      left: 100%; top:0; } 

for example ie9:

nav ul {     :   background: -ms-linear-gradient(to bottom, #ffffff 0%, #bbbbbb 100%);     : } 

and

nav ul li:hover {   background: -ms-linear-gradient(to bottom, #ffffff 0%, #ffffff 40%);         : } 

ie10 works similar rules, without vendor prefixes.


Comments

Popular posts from this blog

java - Run a .jar on Heroku -

java - Jtable duplicate Rows -

validation - How to pass paramaters like unix into windows batch file -