-ms-high-contrast-adjust equivalente no IE9
-
21-12-2019 - |
Pergunta
Um de nossos arquivos CSS usa -ms-ajuste de alto contraste:nenhum para garantir que alguns recursos de fundo apareçam mesmo no modo de alto contraste.Funciona bem no IE10 e IE11.Agora estamos tentando portar o mesmo CSS para o IE9 e, obviamente, não há suporte.
Qual é o equivalente da propriedade -ms-high-contrast-*** no IE9?Existe alguma outra maneira de enganar o navegador para não alterar os recursos com a configuração "modo de alto contraste"?
Solução
Não há equivalente.
Observações
O recurso de mídia -ms-high-contrast foi introduzido no Windows 8.
É para o IE10.
Você pode testá-lo com consultas de mídia como:
@media screen and (-ms-high-contrast: active) {/* ... */}
@media screen and (-ms-high-contrast: black-on-white) { /* */ }
@media screen and (-ms-high-contrast: white-on-black) { /* */ }
http://msdn.microsoft.com/en-us/library/windows/apps/hh465764.aspx
Alguns desenvolvedores o usam para direcionar o IE10 com consultas de mídia:
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* i-love-ie */
}
PS, isso é meio estranho, você quer que um navegador force um sistema operacional a ser exibido de uma maneira específica ou de uma maneira específica no sistema operacional.
[AGUENTAR]
Acabei de encontrar este artigo de Steve Faulkner: http://blog.paciellogroup.com/2010/01/high-contrast-proof-css-sprites/
Sprites CSS usando o antes:pseudoelemento
Uma alternativa para a implementação de sprites CSS usando o método de imagem de fundo traditonal está disponível e resolve o problema de não ser exibido no modo de alto contraste.Este método alternativo utiliza o CSS antes:pseudoelemento (nota:o depois:pseudo elemento também pode ser usado).Exemplo:
Link com um ícone inicial e texto com cores de exibição padrão.Link para um ícone doméstico e texto com cores de alto contraste do Windows.
CSS
span.test1:before {
margin-right: -10px;
content: url(icons.png);
position:relative;
left:-2px;
top:-109px;
}
span.test1 {width:17px;
height:18px;
display:inline-block;
overflow:hidden;}
HTML
<a href="#"><span class="test1"></span>Home</a>
Não tenho tempo para testá-lo.Experimente e volte para nós para que eu possa 'corrigir' esta resposta, se necessário.