errado disposição da tabela no IE (7)

StackOverflow https://stackoverflow.com/questions/197266

Pergunta

Abaixo está o código de um simples html com um layout de tabela. Em FF ele está olhando como eu acho que ele deve ser parecido, no IE7 não. o que estou fazendo de errado?
E como eu posso corrigi-lo? 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <TITLE>test</TITLE>
    </head>
    <body>
        <table  id="MainTable" cellspacing="0" cellpadding="0" border="1">
        <tbody>
            <tr>
                <td colspan="4">
                    <div style='width:769; height:192;'>192
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan="2" valign="top">
                    <div style='width:383; height:100;'>100
                    </div>
                </td>
                <td rowspan="2" valign="top">
                    <div style='width:190; height:200;'>200
                    </div>
                </td>
                <td rowspan="2" valign="top">
                    <div style='width:190; height:200;'>200
                    </div>
                </td>
            </tr>
            <tr>
                <td  valign="top" rowspan="2">
                    <div style='width:190; height:200;'>200
                    </div>
                </td>
                <td  valign="top" rowspan="2">
                    <div style='width:190; height:200;'>200
                    </div>
                </td>
            </tr>
            <tr>
                <td valign="top">
                    <div style='width:190; height:100;'>100
                    </div>
                </td>
                <td valign="top" >
                    <div style='width:190; height:100;'>100
                    </div>
                </td>                           
            </tr>
            <tr>
                <td colspan="2">
                    <div style='width:383; height:100;'>100
                    </div>
                </td>
                <td colspan="2">
                    <div style='width:383; height:100;'>100
                    </div>
                </td>
            </tr>

            <tr>
                <td>
                    <div style='width:190; height:100;'>100
                    </div>
                </td>
                <td>
                    <div style='width:190; height:100;'>100
                    </div>
                </td>
                <td colspan="2">
                    <div style='width:383; height:100;'>100
                    </div>
                </td>
            </tr>
        </tbody>
        </table>
    </body>
</html>
Foi útil?

Solução

presumo que se queixam da altura mínima da linha média (a um contendo apenas células rowspanned), e a altura aumentada das filas adjacentes para compensar, deixando lacunas entre os divs.

IE não pode calcular linha alturas óptimas quando a linha contém apenas as células rowspanned. A solução usual quando você absolutamente não pode rejig-lo para se livrar da rowspan é adicionar um 1px 'fictício' coluna para um lado da mesa, que contém células vazias, cada um com a 'altura' set para o quão alto a linha deve ser.

Mas sim, dependendo do que você está planejando fazer com isso, um layout CSS pode muito bem ser mais apropriado. Se ele é realmente um layout fixo-pixels-por-tudo como neste exemplo, o posicionamento absoluto para cada div vai ser muito, muito mais fácil.

Outros pedaços: largura CSS / valores de altura requerem unidades (presumivelmente 'px'); valign / cellspacing / etc. pode ser mais facilmente feito em uma folha de estilo, mesmo se você estiver usando layouts de mesa; um DOCTYPE-mode normas podem evitar alguns dos erros piores IE (embora, não esta velha, não-CSS relacionadas um).

Outras dicas

Para começar, seus valores CSS deve ter unidades, por exemplo, width:190; deve ser width: 190px;

concordo completamente, você pode dar uma olhada em CSS projeto ou outros quadros CSS para alguma ajuda

À primeira vista parece que o IE7 tem algum suporte quebrado para este tipo de formatação. No começo eu ia propor para se livrar dos divs e mover a formatação (largura e altura) diretamente na TD, mas eu tentei isso e não parece resolver o problema.

Eu acho que isso não é uma boa solução, mas seria possível substituir as células rowspan com mais células com uma fronteira invisível entre eles? Contudo, esta solução falhar se o texto for maior que o tamanho da célula superior.

A escolha do Doctype (4.01 Transitional sem nenhum identificador de sistema (url)) gatilhos Quirks modo no IE que o torna altamente inconsistente com outros browsers.

Mudar para: 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

Ou, pelo menos: 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

(e, é claro, validar mas o HTML e CSS (que iria pegar as unidades ausentes em seus valores de comprimento)).

Você deve definitivamente ir com CSS. Tabelas NUNCA deve ser usado para layout.

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