Browser Compatibility Issues

Question

I have a browser compatibility issues with this css code

nav {

 display: -webkit-box; 
 -webkit-box-orient:horizontal; 
 padding: 2% 0; 
 border-bottom: 1px solid #e6e6e6; 
 border-top: 1px solid #e6e6e6; 
 margin: 2% 0 2% 0; 

}

nav a {

 font-family: 'GoudyRegular'; 
 display:block; -webkit-box-flex:1; 
 text-align:center; 
 font-size: 1.25; 
 color: #666; 

}

and the html code is

<nav>
 <a href="about.html">About</a>
 <a href="#">Blog</a>
 <a href="work.html">Work</a>
 <a href="#">Contact</a>
</nav>

It displays as i want in Chrome but not in mozilla or internet explorer...Pls help

• putvande: -webkit-box-orient is not for Firefox or IE. So you need to find the CSS styles for those browsers.

Answer 1

Make it work across browsers like this:

-webkit-box-orient:horizontal;
-moz-box-orient:horizontal;
-ms-box-orient:horizontal;
-o-box-orient:horizontal;
box-orient:horizontal;