internet - IE9/8/7 css problema de deslizamiento de posición sprite
opacity css internet explorer (6)
Puedes usar el siguiente truco que te ayudará a dar valor manual.
Para IE7 (subrayar antes del valor)
.button:hover {
background-position: _-15.5px 0;
}
O IE-7 y IE-8 (es necesario agregar / 9)
.button:hover {
background-position: -15.5px/9;
}
Para IE8 solo (/ 0 /)
*+.button:hover {
background-position: -15.5px/0/;
}
Quiero css sprite (ancho total de la imagen del sprite: 45 px y altura total: 15 px consta de tres imágenes) pero hay un problema en IE9 / 8/7. enlace y desplazamiento del trabajo, pero cuando se hace clic en el botón (activo), la imagen de sprite se desliza hacia la izquierda 1px. problema solo para IE 9/8 / 7.¿Cómo puedo solucionar esto?
CSS:
body{
margin:0;
padding:0;
}
.button{
background:url(sprite-image.png) no-repeat 0 0;
width:15px;
height:15px;
cursor:pointer;
}
.button:hover{
background:url(sprite-image.png) no-repeat -15px 0;
}
.button:active{
background:url(sprite-image.png) no-repeat -30px 0;
}
.cont{
width:200px;
height:200px;
float:left;
margin:50px 0 0 100px;
}
HTML:
<body>
<div class="cont">
<div class="button"> </div>
</div>
</body>
"link" y "hover" y "active" FF, Chrome, Safari, Opera como este;
pero IE 9/8/7 tiene un aspecto activo como este;
Concreté las imágenes de arriba para que se vea mejor. Mi imagen de sprites;
¿Por qué no usar comentarios condicionales de IE?
<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!-- Consider adding a manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
Y luego escribe, por ejemplo, reglas CSS como. lt-ie9 .someclass{} para apuntar a una versión de IE. Los uso para arreglar algunas cosas css específicas de IE. No hay hacks sucios, no hastle solo css. ¿Has comprobado con, por ejemplo, Firebug Lite qué sucede? esquema: 0 ninguno?
Agregue una hoja de estilo específica de Internet Explorer a la sección <head></head> .
<!--[if lt IE 9]>
<link rel="stylesheet type="text/css" href="/css/ie.css" />
<![endif]-->
y en ie.css haz algo como:
.button:active{
background:url(sprite-image.png) no-repeat -29px 0 !important;
}
(Siempre hay un problema con ie, ¡uf!)
Creé un sprite falso usando su gráfico para ver lo que está viendo, pero se ve bien en mi violín en todos los IE 7-9 (tenga en cuenta que solo cambio de posición y lo convertí en una interpretación (menos)):
http://jsfiddle.net/Riskbreaker/Rr8p2/
body{
margin:0;
padding:0;
}
.button{
background:url(images/sprite.png) no-repeat 0 0;
width:14px;
height:15px;
cursor:pointer;
}
.button:hover{
background-position:0px -27px;
}
.button:active{
background-position:0px -27px;
}
.cont{
width:200px;
height:200px;
float:left;
margin:50px 0 0 100px;
}
Recuerda la posición que hice para que puedas ajustar. Nunca tuve el problema de IE activo antes ... pero déjame saber qué estás viendo ... si el problema persiste y no quieres otro archivo, haz esto:
IE7: *.button:active{background-position:0px -28px;} (o cualquiera que sea la posición correcta) ...
IE8: .button:active{background-position:0px -28px/9;} .........
IE9 ... no estoy seguro de tu último pero no debería tener ningún problema (el último)
He enfrentado problemas similares con IE8 anteriormente, pero IE9 funcionó bien en mi caso (no estoy seguro acerca de IE7 pero debe ser como IE8 para esto).
Se puede resolver / mejorar mediante uno de estos 2 enfoques:
1) Modifique la imagen (tal vez en resolución, combinación de colores, etc.) e intente si funciona. ¿Por qué esto podría funcionar? Debido a que en su ejemplo, IE parece intentar hacer algunas manipulaciones de imagen "de manera inteligente", que desafortunadamente fallan a veces (especialmente en casos de imágenes pequeñas / píxeles perfectos) y puede esperar que no falle mal en sus nuevas imágenes.
2) Use la precisión de posición de fondo de las unidades de 0.5px .
Note " posición de fondo: -15.5px 0; " en el siguiente código. Esta solución reducirá su frustración en al menos un 50% :-) Me temo que es posible que deba proporcionar CSS específico de IE para esta solución, pero debería estar bien ... Puede agregar el nombre de la clase del identificador del navegador en la etiqueta usando JavaScript o con la técnica mencionada @ http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ y luego use esos nombres de clase cuando escriba CSS específico del navegador.
La solución:
.button {
background:url(images/sprite.png) no-repeat 0 0;
width: 15px;
height: 15px;
cursor:pointer;
}
.button:hover {
background-position: -15.5px 0;
}
.button:active {
background-position: -30px 0;
}
.cont {
width: 200px;
height: 200px;
float: left;
margin: 50px 0 0 100px;
}
Pruebe este cambio en css:
.button{
background: url(sprite-image.png) no-repeat left 0;
width: 15px;
height: 15px;
cursor: pointer;
}
.button:hover{
background: url(sprite-image.png) no-repeat center 0;
}
.button:active{
background: url(sprite-image.png) no-repeat right 0;
}