Почему этот div/img не будет находиться в IE8?

У меня есть очень простая страница для холдинга, в которой я построил центрирование div, привязки и изображения. По какой-то причине он не будет сосредоточен в IE8 (в любом режиме), и я надеюсь, кто-то скажет мне, почему. У меня не было возможности попробовать его в других браузерах IE. Я пробовал это в Chrome и FF3, где он работает нормально.

<html>
<head>
<title>Welcome</title>
<style>
    #pageContainer {width:300px;margin:0 auto;text-align:center;}
    #toLogo{border:none; }
</style>
</head>
<body>
    <div id="pageContainer">
    <a href="#" onclick="location.href='http://portal.thesit.com'; return false;" id="toSite"><img src="LOGO_DNNsmall.png" id="toLogo"></a>
    </div>
</body>
</html>

Я сказал, что это действительно просто.:)

Спасибо,

Бретт

Ответы

Ответ 1

Вы действительно хотите, чтобы ваша страница работала в режиме quirks? Ваши HTML-центры прекратились, как только я добавил doctype для принудительного режима стандартов:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
<title>Welcome</title>
<style>    
    #pageContainer {width:300px;margin:0 auto;text-align:center;}    
    #toLogo{border:none; }
</style>
</head>

<body>

<div id="pageContainer">
    <a href="http://portal.thesit.com" id="toSite">
    <img src="http://stackoverflow.com/content/img/so/logo.png" id="toLogo"></a> </div>

</body>
</html>

Ответ 2

Поля auto по сторонам div оставляют его в браузере, чтобы решить, куда он идет. В браузере ничего не говорится о том, что div должен быть центрирован в теле или влево или вправо. Так это до браузера. Если вы добавите директиву в тело, ваша проблема будет решена.

<html>
  <head>
    <title>Welcome</title>
    <style>
      body { text-align: center;}
      #pageContainer {width:300px; margin:0px auto;
            text-align:center; border:thin 1px solid;}
      #toLogo{border:none; }
    </style>
  </head>
  <body>
    <div id="pageContainer">
      <a href="http://portal.thesit.com" id="toSite">
        <img src="LOGO_DNNsmall.png" id="toLogo">
      </a>
    </div>
  </body>
</html>

Я добавил границу 1px в div, чтобы вы могли видеть, что происходит более четко.

Вы оставляете его в браузере, потому что он в режиме quirks. Чтобы удалить режим quirks, добавьте определение doctype в начало, например:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <title>Welcome</title>
    <style>
      #pageContainer {width:300px; margin:0px auto;
            text-align:center; border:thin 1px solid;}
      #toLogo{border:none; }
    </style>
  </head>
  <body>
    <div id="pageContainer">
      <a href="http://portal.thesit.com" id="toSite">
        <img src="LOGO_DNNsmall.png" id="toLogo">
      </a>
    </div>
  </body>
</html>

Теперь вы сможете увидеть свой центр 300 px div на странице.

Ответ 3

Добавить text-align:center в тело. Это должно быть сделано в сочетании с margin:0 auto на div.

Вы можете центрировать, не используя text-align:center на теле, путем обертывания всего содержимого страницы в контейнере полной ширины и затем установки text-align:center на этом.

<html>
<head>
<title>Welcome</title>
<style>
    #container {text-align:center;border:1px solid blue}
    #pageContainer {width:300px; margin:0 auto; border:1px solid red}
    #toLogo{border:none; }
</style>
</head>
<body>
    <div id="container">
        <div id="pageContainer">
        <a href="http://portal.thesit.com" id="toSite"><img src="LOGO_DNNsmall.png" id="toLogo"></a>
        </div>
    </div>
</body>
</html>

(я добавил div container). Это ничего не меняет, хотя... просто дополнительный div. Вам все равно нужны все те же свойства css.

Ответ 4

Вероятно, вы захотите изменить его на следующее:

<html>
<head>
<title>Welcome</title>
<style>
    body { text-align: center; }
    #pageContainer {width:300px;margin:0 auto;}
    #toLogo{border:none; }
</style>
</head>
<body>
    <div id="pageContainer">
    <a href="http://portal.thesit.com" id="toSite"><img src="LOGO_DNNsmall.png" id="toLogo"></a>
    </div>
</body>
</html>

text-align:center; перемещается в тело. Если вы хотите поместить другое выровненное левое содержимое в div #pageContainer, вам понадобится text-align:left; для этого класса. Это решение, которое я использовал сейчас на нескольких веб-сайтах и, похоже, работает во всех браузерах (это то, что Dreamweaver использует в нем стартовые шаблоны).

Ответ 5

ДЛЯ ПОЛЬЗОВАТЕЛЕЙ BLUEPRINT Это заставило мои орехи, пока я не нашел это сообщение: проблема с ie8 и планом Короче говоря, в коде html измените

 <!--[if IE]>
 <link rel="stylesheet" href="../css/blueprint/ie.css" type="text/css" media="screen, projection" /> 
<![endif]-->

для

<!--[if lt IE 8]>
<link rel="stylesheet" href="../css/blueprint/ie.css" type="text/css" media="screen, projection" />
<![endif]-->

Отношения Alex

Ответ 6

Это работает для меня на IE6,7,8, FF 3.6.3:

    #container
    {
        width:100%;
    }

    #centered
    {
        width:350px;
        margin:0 auto;
    }

    <div id="container">
        <div id="centered">content</div>
    </div>