Botão diferente no Firefox e Chrome

3 respostas
S

Olá a todos, considerem a seguinte css:

demo.css
#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; 
}

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.

3 Respostas

InicianteJavaHenriqu

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

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

S

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

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

Chrome: 18.0.1025.162 m
Firefox: 11.0

thiagof

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)

Criado 20 de abril de 2012
Ultima resposta 20 de abr. de 2012
Respostas 3
Participantes 3