Проблема с положением CSS в IE6

У меня есть код CSS с заголовком, нижним колонтитулом, левой панелью меню и содержимым. Макет работает во всех браузерах, кроме IE6. В IE6 div linksPanel неправильно отображается в div masterContent. Я считаю, что это как-то связано с элементом position. Я просмотрел кучу статей, но не смог найти работающее решение. К сожалению, я должен поддерживать IE6 и нуждаться в решении. Код ниже. Любая помощь будет большой признательна!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
     <style type="text/css">
        .masterContent
        {
            position:fixed;
            top:178px;
            bottom:42px;
            left:0px; 
            right:0px; 
            overflow:auto; 
            background:#fff;
        } 
        .linksPanel
        {
            position:absolute; 
            top:0px;
            left:10px;
            bottom:0px;  
            width:254px;
            overflow:auto; 
            background:#f4f4f3;
            line-height:20px;
            padding:5px;
        }
        .mainPanel 
        {
            position:absolute; 
            top:5px;
            bottom:0px;
            right:10px;
            width:70%;
            overflow:auto;
            padding-left:10px;
            padding-bottom:0px;
        }    
        .footerPanel
        {
            position:absolute; 
            bottom:0px; 
            left:0px;
            padding:0px;
            margin:0px;
            width:100%;
            height:44px;
            text-align:right;
            overflow:hidden;
            background:#f4f4f3;
            z-index:100;
        }            
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <table border="0" width="100%" cellpadding="0" cellspacing="0">
            <tr>
                <td valign="top">
                    <div class="headerPanel">    
                        <p>Header stuff here.</p>
                        <p>More header stuff here.</p>
                    </div>      
                </td>
            </tr>
        </table>                     
        <div class="masterContent">
            <div class="linksPanel">
                <p><a href="error.aspx">Link1</a></p>
                <p><a href="error.aspx">Link2</a></p>
                <p><a href="error.aspx">Link3</a></p>
                <p><a href="error.aspx">Link4</a></p>
                <p><a href="error.aspx">Link5</a></p>
                <p><a href="error.aspx">Link6</a></p>
                <p><a href="error.aspx">Link7</a></p>
                <p><a href="error.aspx">Link8</a></p>
                <p><a href="error.aspx">Link9</a></p>
                <p><a href="error.aspx">Link10</a></p>
                <p><a href="error.aspx">Link11</a></p>
                <p><a href="error.aspx">Link12</a></p>
                <p><a href="error.aspx">Link1</a></p>
                <p><a href="error.aspx">Link2</a></p>
                <p><a href="error.aspx">Link3</a></p>
                <p><a href="error.aspx">Link4</a></p>
                <p><a href="error.aspx">Link5</a></p>                
                <p><a href="error.aspx">Link6</a></p>
                <p><a href="error.aspx">Link7</a></p>
                <p><a href="error.aspx">Link8</a></p>
                <p><a href="error.aspx">Link9</a></p>
                <p><a href="error.aspx">Link10</a></p>
                <p><a href="error.aspx">Link11</a></p>
                <p><a href="error.aspx">Link12</a></p>                
            </div>
            <div class="mainPanel">
                <p>test content</p>
                <p>test more content</p>
                <p>test</p>
                <p>test</p>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
            </div>        
        </div>
        <table border="0" width="100%" cellpadding="0" cellspacing="0">
            <tr>
                <td valign="top">
                    <table width="100%" border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <td>        
                                <div class="footerPanel">    
                                    <p>Footer stuff here.</p>
                                </div>        
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>                                
    </form>
</body>
</html>

css internet-explorer internet-explorer-6 dhtml
person John81    schedule 13.06.2011    source источник
comment
Вы используете таблицы для макета. Является ли макет на основе CSS приемлемым ответом. Также ваш .linksPanel имеет позицию absolte со значением top: 0px и bottom: 0px; - Не имеет никакого смысла. Удалите любой из двух. Когда вы говорите, что это неправильно отображается, вы должны быть более конкретными. Как он выглядит, что с ним не так и как вы хотите, чтобы он выглядел. Это выглядит одинаково в IE9 и IE6   -  person Jawad    schedule 14.06.2011
comment
Все вложено в элемент формы?   -  person Jawad    schedule 14.06.2011
comment
Почему вы устанавливаете верх и низ, оба свойства смещения, для всех позиционируемых элементов. Правило, которое будет ниже в коде, будет иметь преимущество перед предыдущим верхним кодом.   -  person Jawad    schedule 14.06.2011
comment
Джавад, это не отображается правильно, это означает, что в IE6 linksPanel не содержится в div masterContent и не отображается с полосой прокрутки. Содержимое div linksPanel выходит за нижний колонтитул и увеличивает размер страницы. При правильном рендеринге linksPanel должен содержаться в div masterContent, а поскольку содержимое div выше окна браузера, оно должно отображаться с полосой прокрутки. См. эту ссылку для скриншота того, что я вижу в IE6. img3.imageshack.us/img3/7210/screenshotege.jpg   -  person John81    schedule 14.06.2011
comment
Если я уберу нижний: 0px, тогда div linksPanel не получит полосу прокрутки, но div mainPanel сделает это. Это неправильно. Мне нужно, чтобы в div linksPanel была полоса прокрутки.   -  person John81    schedule 14.06.2011
comment
Да, все вложено в элемент формы.   -  person John81    schedule 14.06.2011
comment
Мне жаль дурака, который требует, чтобы его разработчик все еще поддерживал IE6.   -  person Wex    schedule 14.06.2011
comment
@John: Как уже говорилось, вы не можете располагать что-то сверху и снизу одновременно. Это идеальное программное противоречие. Это почти то же самое, что сказать, что вы в Чикаго, а находитесь в Париже, или ваша рубашка должна быть маленького размера, но в то же время очень большого размера, или свет выключен, когда он горит. Это веб-программирование, а не квантовая физика.   -  person Sparky    schedule 14.06.2011
comment
@Wex: это, вероятно, отлично работало бы в IE6, если бы в нем не было так много странных ошибок программирования.   -  person Sparky    schedule 14.06.2011
comment
@Wex: мы бы сказали то же самое о IE9 через , хмммммммм, ..... около года !?   -  person Jawad    schedule 14.06.2011
comment
@Sparky672, @Jawad: top:0; bottom:0 имеет смысл. Старая статья на эту тему: alistapart.com/articles/conflictingabsolutepositions   -  person thirtydot    schedule 15.06.2011
comment
@thirtydot: Очень интересно.   -  person Sparky    schedule 15.06.2011
comment
@thirtydot: я думал об этом и не могу не прийти к тем же выводам, что и изначально. Когда вы просто позиционируете его только сверху с неопределенной высотой, div расширяется вместе с содержимым. Однако, если вы укажете и верхнее, и нижнее положение, вы не только не сможете указать высоту (еще одно противоречие), но и что произойдет, когда содержимое превысит div? Будет ли он пытаться расширяться (нарушая одно из двух правил положения), переполняться (как если бы он был фиксированной высоты) или какой-то непредсказуемый результат? Это может быть разрешено, но я с уважением не согласен с тем, что это имеет идеальный смысл.   -  person Sparky    schedule 16.06.2011
comment
@Sparky672: Я согласен, что это несколько нелогично, но это то, что есть. Когда вы его используете, вам не нужно хотеть указывать высоту. Это принесло мне много одобрений/голосов, что означает, что это была хорошая техника для использования: 1, 2, 3, 4, 5, 6, 7 .. Я могу проголосовать? :)   -  person thirtydot    schedule 16.06.2011
comment
@thirtydot: Не поймите меня неправильно ... похоже, вы доказали, что это действительно так, но это не мой предпочтительный подход. Как насчет моего вопроса: я согласен, что вы не можете указать высоту... опять же, но что происходит, когда содержимое превышает div? Обычно, когда высота опущена, div просто расширяется. В этом случае он попытается расшириться и просто потерпит неудачу? Как это не удастся? Переполнение? Будет ли этот сбой одинаковым во всех браузерах? Я, честно говоря, не знаю... но если поведение в разных браузерах неодинаково, я должен, по крайней мере, подвергнуть сомнению подход.   -  person Sparky    schedule 16.06.2011
comment
@Sparky672: Текст просто переполнится. Слишком много текста никогда не изменит высоту элемента. Сбой будет одинаковым для всех браузеров. Проверьте это в любом браузере: fiddle.jshell.net/RGNxm/show/light — сделать окно относительно небольшим, чтобы текст выплескивался наружу.   -  person thirtydot    schedule 16.06.2011
comment
@thirtydot: Хорошо, спасибо. Я играл со скрипкой, но у меня не было легкого доступа к IE. Да, я никогда не был поклонником дизайна, который ломается таким образом... Мне нравится, когда мои div расширяются/сокращаются для изменения содержимого. Кажется, что желаемый эффект от этой вещи с верхним/нижним положением может быть достигнут лучше с помощью других методов, таких как поля или отступы.   -  person Sparky    schedule 16.06.2011
comment
@Sparky672: Это не проблема. Вы не стали бы использовать эту технику для чего-то вроде той демонстрации, которую я только что сделал. Я уже показал вам несколько примеров, в которых вы могли бы его использовать. Хитрость заключается в том, чтобы знать, когда его использовать. В некоторых случаях это красивое и красноречивое решение. В других случаях это ужасный выбор.   -  person thirtydot    schedule 16.06.2011
comment
@Sparky672, @thirtydot: Почему я пропустил все эти комментарии. Никогда не появлялся в моем почтовом ящике. Читал об этом в книге CSS: The Missing Manual.   -  person Jawad    schedule 20.06.2011
comment
@Jawad: Потому что ни один из комментариев не начинался с @Jawad. Уведомление получают только OP и человек, к которому обращается символ @.   -  person Sparky    schedule 20.06.2011

Ответы (1)


arrow_upward
1
arrow_downward

Это очень странный дизайн, и я действительно видел несколько странных дизайнов.

  • Вы помещаете все в элемент <form>, и под всем я подразумеваю все, включая заголовок, div#masterContent и нижний колонтитул.
  • Чем вы используете таблицы, и я понятия не имею, почему. Все, что вы сделали с таблицами, можно сделать с помощью div.
  • Вы даете вам div.masterContent position:fixed с верхней частью: 178px и нижней: 42px. Знакомы ли вы с концепциями позиционирования в CSS? Когда вы присваиваете любому элементу фиксированную позицию, этот элемент остается на экране независимо от того, прокручиваете ли вы его вниз. Это то, что вы хотите, и если вы хотите, я не могу представить, что это будет за страница.
  • Вы даете своему div.linksPanel абсолютную позицию с верхним: 0, нижним: 0 и левым: 10px. Как я уже сказал, это не имеет никакого смысла. Как это может быть 0 сверху, а также 0 снизу. Эти свойства смещения задаются с использованием верхнего левого, верхнего правого или нижнего левого, нижнего правого.
  • У вашего div.mainPanel те же проблемы.

Я думаю, либо вы совершенно не поняли CSS Positioning and Layouts, либо я совершенно не понял этого. Может быть, это то, что вы ищете.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" dir="ltr">

 <head runat="server">
 <title>Document Template</title>
 <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
 <link rel="stylesheet" type="text/css" href="basic.css" />
 </head>

 <body>

<div id="wrapper">

    <form id="form1" runat="server">

        <div id="header">
            <p>Header Stuff Here</p>
            <p>More Header Stuff Here</p>
        </div>

        <div id="content">
            <div id="links_panel">
                <p><a href="error.aspx">Link1</a></p>
                <p><a href="error.aspx">Link2</a></p>
                <p><a href="error.aspx">Link3</a></p>
                <p><a href="error.aspx">Link4</a></p>
                <p><a href="error.aspx">Link5</a></p>
                <p><a href="error.aspx">Link6</a></p>
                <p><a href="error.aspx">Link7</a></p>
                <p><a href="error.aspx">Link8</a></p>
                <p><a href="error.aspx">Link9</a></p>
                <p><a href="error.aspx">Link10</a></p>
                <p><a href="error.aspx">Link11</a></p>
                <p><a href="error.aspx">Link12</a></p>
                <p><a href="error.aspx">Link1</a></p>
                <p><a href="error.aspx">Link2</a></p>
                <p><a href="error.aspx">Link3</a></p>
                <p><a href="error.aspx">Link4</a></p>
                <p><a href="error.aspx">Link5</a></p>
                <p><a href="error.aspx">Link6</a></p>
                <p><a href="error.aspx">Link7</a></p>
                <p><a href="error.aspx">Link8</a></p>
                <p><a href="error.aspx">Link9</a></p>
                <p><a href="error.aspx">Link10</a></p>
                <p><a href="error.aspx">Link11</a></p>
                <p><a href="error.aspx">Link12</a></p>
            </div>

            <div id="main_panel">
                <p>test content</p>
                <p>test more content</p>
                <p>test</p>
                <p>test</p>
                <p>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem
                </p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>

            </div>

            <br />
        </div>

        <div id="footer_panel">
            <p>Footer stuff here.</p>
        </div>
    </form>
</div>

Со следующим CSS

/* START - BASIC CSS */

/* START - CSS Reset */
*
{
margin: 0;
padding: 0;
}

p
{
line-height: 20px;
margin: 20px 0;
}
/* END - CSS Reset */

/* START - div wrapper */
div#wrapper
{
margin: 0 auto;
width: 960px;
border: 1px solid black;
}
/* END - div wrapper */

/* START - hack for "margin: auto" for IE6*/
body
{
text-align: center;
}

div#wrapper
{
text-align: left;
}
/* END - hack for "margin: auto" for IE6*/

/* START - form form1 */
form#form1
{
}
/* END - form form1 */

/* START - div header */
div#header
{
border: 1px solid black;
}
/* END - div header */

/* START - div content */
div#content
{
border: 1px solid black;
height: 500px;

}
/* END - div content */

/* START - div links_panel */
div#links_panel
{
width: 250px;
float: left;
height: 500px;
overflow: auto;
border: 1px solid black;
}
/* END - div links_panel */

/* START - div main_panel */
div#main_panel
{
width: 704px;
float: right;
height: 500px;
overflow: auto;
border: 1px solid black;
}
/* END - div main_panel */

/* START - div footer_panel */
div#footer_panel
{
clear: both;
border: 1px solid black;
}
/* END - div main_panel */

/* END - BASIC CSS */

По сути, вам нужен заголовок, за которым следует панель ссылок слева, которая должна иметь полосу прокрутки, за которой следует основная панель, которая также должна иметь полосу прокрутки, и она должна быть справа от панели ссылок и, наконец, за ней следует фоттер.

person Jawad    schedule 14.06.2011
comment
Я полностью изменил дизайн вашей страницы. Включили элемент формы, которого там быть не должно. Теперь он не включает в себя никаких таблиц. Это макет на основе плавающей точки, в отличие от макета на основе позиционирования. Это также фиксированная ширина, но ее можно легко изменить на жидкую или эластичную с помощью div#wrapper. Включает в себя базовый сброс CSS, который следует заменить на правильный. Также включает хак для центрирования макета в IE6. Наряду с XHTML также включен правильный метатег. Ничего особенного, просто простой дизайн без всех этих элементов table, td и tr. - person Jawad; 14.06.2011