Почему мой макет работает в IE <6, а не IE> 7? - PullRequest
Новая
       28

Почему мой макет работает в IE <6, а не IE> 7?

1 голос
/ 24 августа 2011

Я работаю на Mac, поэтому полагаюсь на эмуляторы для IE-тестирования. Согласно netrenderer (http://ipinfo.info/netrenderer/), мой макет (который, естественно, прекрасно работает на моих установленных версиях Safari & Firefox) работает в IE6 и ниже, но не в IE7 и выше.

Обратите внимание, что я не проверял это с реальной установкой IE - только с netrenderer. Это показывает, что в IE6 и ниже, несмотря на некоторые незначительные проблемы с размером шрифта, он в основном работает: «меню» находится слева, а «содержимое» - справа, а фоновое изображение отображается для «меню». ». В IE 8 и 9 div расположены друг над другом, а в IE7 div "menu" смещен в крайнее правое положение. В 7, 8 и 9 фоновое изображение не отображается для «меню».

Я создал тестовую страницу с упрощенным содержимым и соответствующими стилями, встроенными в заголовок: http://www.steph -morris.com / test.html

Я проверил его через валидатор W3C, и он прошел проверку в порядке. Я попытался изменить положение: варианты различных контейнеров, как предлагалось многими решениями позиционирования StackOverflow IE, безрезультатны. Я надеюсь, что некоторые закаленные в боях ветераны войн за совместимость браузеров смогут взглянуть на это и дать мне понять, почему выбранная мной концепция компоновки не будет работать с IE, и укажут мне направление приемлемый взлом или замена.

1 Ответ

0 голосов
/ 23 мая 2012

Это было недавно, но я заметил, что ваша ссылка все еще активна (и все еще показывает неработающий макет) ...

Я быстро взглянул на это, и я думаю, что проблема заключается в вашейCSS.У меня не было времени, чтобы тщательно изучить, но мне удалось быстро составить базовую версию вашего сайта, изменив некоторые строки, которые работали в IE9 / 8/7 и FF.

Надеюсь, это поможет:) 

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Steph Morris | TEST</title>

<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Puritan">

<style>

body {background:#ffcc33 url('http://www.steph-morris.com/images/other_bg.jpg'); font:13px/1.5 Helvetica}

#menu {width:170px; float:left; margin-right:1em}
#logo{}
#logo h1{}
#logo h1 a{color:#000; text-decoration:none; font-family:'Gill Sans','Puritan',Verdana,Arial,'Liberation Sans',FreeSans,sans-serif}

#middle_left ul {
font-family: 'Gill Sans','Puritan',Verdana,Arial,'Liberation Sans',FreeSans,sans-serif;
font-size: 13px;
list-style:none;
padding:0;
color:#000}

#other {float:left; width:600px;}
#other h1 {
font-family: 'Gill Sans','Puritan',Verdana,Arial,'Liberation Sans',FreeSans,sans-serif;
font-size: 35px;
padding-right: 15px;
padding-top: 15px;
margin:0;
}
#other_text {padding:25px;}
#other_content {width:600px; height:600px; background: url("http://www.steph-morris.com/images/other_square.jpg") no-repeat scroll center top transparent}
</style>

</head>

<body>    
<div id="container_other">
    <div id="menu">
        <div id="menu_left">
            <div id="top_left">
                <div id="logo"><h1><a href="#">Steph Morris</a></h1></div>
            </div>
            <div id="middle_left">
                <ul>
                    <li><div><a href="#">The Start</a></div></li>
                    <li><div><a href="#">About</a></div></li>
                    <li><div><a href="#">The Novel</a></div></li>
                    <li><div><a href="#">Translation / Übersetzung</a></div></li>
                    <li class="current"><div><a href="#">Around</a></div></li>
                </ul>
            </div>
            <div id="bottom_left">
                <p class="contact"><a href="mailto:steph@stephmorris.com">Contact:<br>steph@<br>stephmorris.com</a></p>
            </div>
        </div>
    </div>
    <div id="other" class="">
        <h1 class="veolay">Other Works</h1>
        <div id="other_content">
            <div id="other_text" class="veolay"><p>Due to absolute positioning, we need to define the height of the slideshow DIV. Also, notice that we defined three different z-indexes&mdash;we will manipulate these soon using jQuery.</p>
            <p>For the slideshow animation we are going to switch between each photo at a set rate. So let&rsquo;s start by writing a function that brings in a new photo on top of the last active image:</p>
        </div>
        </div> 
    </div> 
</div>
</body>
</html>
...