Pergunta

O que é a definitiva maneira de imitar a propriedade CSS min-width no Internet Explorer 6? É melhor não tentar?

Foi útil?

Solução

foo { min-width: 100px }      // for everyone
* html foo { width: 100px }   // just for IE

(ou servir uma folha de estilo separada para IE usando condicional comentários )

Outras dicas

Você pode usar uma expressão (como sugerido por HBoss), mas se você está preocupado com o desempenho, então a melhor maneira de fazer isso é adicionar um calço dentro do elemento que você deseja aplicar um min-width para.

<div id="container">
  The "shim" div will hold the container div open to at least 500px!
  You should be able to put it anywhere in the container div.
  <div class="shim">&nbsp;</div>
</div>

#container .shim {
  width: 500px;
  height: 0;
  line-height: 0;
}

Isso requer um pouco de marcação não semântica, mas é uma solução verdadeiramente cross-browser e não requer a sobrecarga do uso de uma expressão.

Este artigo em CSS Play, por Stu Nicholls, mostra as diferentes métodos para alcançar min de largura no IE, em todos os modos (peculiaridades, etc) e mesmo para o IE / MAC.

Eu brincava com cada resposta dada aqui no mês passado. E depois de brincar com o método de Pretaul ( Min-largura em MSIE 6 ), ele parece ser a melhor alternativa para min de largura. Não há hacks ou qualquer coisa, apenas em linha reta para cima código CSS compliant que leva 30 segundos para implementar.

De pesquisando por aí, expressões parecem ser os mais populares. Para mim de qualquer maneira, ittended para bloquear aleatoriamente meu navegador (IE e FF).

Eu não sei, eu tive algum sucesso com:

    min-width: 193px;
    width:auto !important; 
    _width: 193px;  /* IE6 hack */

A combinação de Dustin Diaz' ??min-height rápido corte e Como posso especificar em HTML ou CSS a largura mínima absoluta de uma célula da tabela

fazer sua tag css como _width:. 500px ou qualquer

Isso funciona muito bem ...

div.container {
    min-width: 760px; 
    width:expression(document.body.clientWidth < 760? "760px": "auto" ); 
}

min-height rápido cortar funciona para mim (também funciona para largura)

O exemplo calço é bom para forçar o navegador para mostrar uma barra de rolagem horizontal quando o recipiente chega a um certo tamanho, mas você vai perceber que o conteúdo no recipiente ainda será redimensionada como a janela fica menor. Imagino que este não é o objetivo geral ao tentar alcançar largura mínima no IE 6.

técnica min de largura incompleta http://www.mediafire.com/imgbnc. php / 260264acec99b5aba3e77c1c4cdc54e94g.jpg

Além disso, o uso de expressões e outros hacks louco CSS simplesmente não é uma boa prática. Eles são inseguros e imundo. Este artigo explica as advertências de hacks CSS e por que eles devem ser evitados completamente.

Eu, pessoalmente, considero post de scaryjeff para ser o melhor conselho para alcançar a verdadeira min-width no IE6 e como um desenvolvedor de layout CSS experiente que eu ainda tenho que encontrar uma solução melhor que é aplicável a este tipo de problemas.

Este artigo em CSS Play, por Stu Nicholls, mostra as diferentes métodos para alcançar min de largura no IE, em todos os modos (peculiaridades, etc) e mesmo para o IE / MAC.

eu forneci uma resposta a uma pergunta semelhante que detalha o uso desta técnica para alcançar corretamente min-width. Ele pode ser visto aqui:

CSS: Duas colunas de 50% dos fluidos não respeitando min largura

A técnica é CSS simples, válida que pode ser usado em quase qualquer situação. Aplicada ao exemplo calço acima dela resulta no que eu considero ser a funcionalidade correta min-width.

técnica min de largura correcta http://www.mediafire.com/imgbnc. php / a67b2820bfbd6a5b588bea23c4c0462f4g.jpg

botão de linha Single

button{
background-color:#069;
float:left;
min-width:200px;
width:auto !important;
width:200px;
white-space: nowrap}

Use comentários condicionais para referência e MSIE folha de estilo 6 específica, em seguida, criar CSS como abaixo.

navegadores Conformidade vai usar:

min-width: 660px;

Em seguida, MSIE 6 vai usar:

width: expression((document.body.clientWidth < 659)? "660px" : "auto");
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top