Botão diferente no Firefox e Chrome

Front-end
#1

Olá a todos, considerem a seguinte css:

demo.css

[code]#cont {
margin: 5% auto 0 auto;
display: block;
width: 690px;
}

.title {
font-size: 30px;
font-family: Georgia;
font-style: italic;
font-weight: bold;
color: #161616;
margin: 2em 0 1em 0;
text-shadow: 0px 1px 0px #fff;
display: block;
}

ul {
margin-left: -3em;
}

#menu-css li, #menu-jquery li {
display: inline;
list-style: none;
}

/* For CSS Menu */

#menu-css li a {

/* Border Radius */
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;

/* Border Shadow */
-webkit-box-shadow: 1px 2px 2px rgba(0,0,0,0.6);
-moz-box-shadow: 1px 2px 2px rgba(0,0,0,0.6);
box-shadow: 1px 2px 2px rgba(0,0,0,0.6);

/* Animation (Webkit, Gecko & Mozilla) */
-webkit-transition-duration: 0.20s;
-webkit-transition-timing-function: ease-out; 
-moz-transition-duration: 0.20s;
-moz-transition-timing-function: ease-out; 

color: #ffffff;
background: rgba(0,0,0,0.2);
display: inline-block;
padding: 5px 15px;
outline: none;
text-decoration: none;

}

#menu-css li a:hover {
	background: rgba(0,0,0,0.5);
	padding: 5px 25px;
}

#menu-css li a:active {
	background: rgba(0,0,0,0.1);
	-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.4);
	-moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.4); 
	box-shadow: 1px 1px 1px rgba(0,0,0,0.4); 
}

/* For jQuery Menu */

#menu-jquery li a {

/* Border Radius */
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;

/* Border Shadow */
-webkit-box-shadow: 1px 2px 2px rgba(0,0,0,0.6);
-moz-box-shadow: 1px 2px 2px rgba(0,0,0,0.6);
box-shadow: 1px 2px 2px rgba(0,0,0,0.6);

color: #ffffff;
background: rgba(0,0,0,0.2);
display: inline-block;
padding: 5px 15px;
outline: none;
text-decoration: none;

}

#menu-jquery li a:active {
	-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.4);
	-moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.4); 
	box-shadow: 1px 1px 1px rgba(0,0,0,0.4); 
}

a, a:visited {
color: #161616;
text-decoration: none;
}[/code]

Agora as tags no html:

<ul id="menu-css"> <li><a>Botão</a></li> </ul>

A minha duvida é a seguinte: por que no Firefox ao passar o mouse em cima do botão ele faz a animação e no chrome ele não faz nada?

Obs: Eu achei esse código na internet.

#2

Quais as versões de cada navegador vc usou :?:

Talvez o Chrome não tem suporte :?: :shock: :?:

#3

[quote=InicianteJavaHenrique]Quais as versões de cada navegador vc usou :?:

Talvez o Chrome não tem suporte :?: :shock: :?: [/quote]

Chrome: 18.0.1025.162 m
Firefox: 11.0

#4

ja testou no Safari e funcionou???

teoricamente é para funcionar lá, se funcionar lá, é para funcionar no Chrome!

as propriedades CSS que começam com:
-webkit-*
-moz-*

são específicas para cada navegador. a primeira é usada pelo Safari (e Chrome na teoria) e a segunda é reconhecida pelo firefox (mozilla)

da uma olhada nos links para entender melhor
http://pt.wikipedia.org/wiki/Gecko_(Mozilla)

#5