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"?

Foi útil?

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.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top