Позиционирование в IE7 слегка выключено (как 10px сверху и справа)

У меня есть определенная проблема, и я искал много вопросов, чтобы найти решение, но я просто не могу ее исправить. Проблема заключается в следующем:

На странице есть основной div-элемент "обертка" (по причинам центрирования), и внутри него есть текст, изображения и ряд включений (нижний колонтитул, заголовок и т. Д.). Изображения используют "position: absolute" и используют CSS "top" и "left" свойство для их смещения. Тем не менее, Firefox и Internet Explorer 7, похоже, начинают свое смещение с другой точки, а это означает, что большинство изображений примерно на 10px ниже и на 10px вправо в IE7

Что я сделал, чтобы убедиться; - проверил мой HTML с помощью валидатора W3C (все исправил) - попытался заменить позицию: абсолютная; с некоторой позиции: относительная; - Положение обертки было установлено как положение: относительное; - не хотел бы работать с определенной таблицей стилей только для IE7 (поэтому не пробовал это) - PS: использовал meta http-эквивалент ="X-UA-совместимый" content="IE=EmulateIE7", чтобы позволить моему браузеру IE8 показывает мой проект, как это было в IE7

Я очень надеюсь, что вы поможете мне! Заранее спасибо, и тем самым я даю соответствующий HTML и CSS

HTML:

 <?xml version="1.0" encoding="utf-8"?>
 <!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>

 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>

 <title>
 Document Title 
 </title>

 <link rel='stylesheet' type="text/css" href="includes/mainmenu/Mainmenustyle.css"/>
 <link rel='stylesheet' type="text/css" href="includes/header_main/header_mainstyle.css"/>
 <link rel='stylesheet' type="text/css" href="includes/footer_main/footer_mainstyle.css"/>
 <link rel='stylesheet' type="text/css" href="Homepagestyle.css"/>

 </head>

 <body>

 <div id="bg"></div>
 <div id="wrapper">

 <div>
 <!--#include virtual="includes/mainmenu/mainmenu.html" -->
 </div>

 <div>
 <!--#include virtual="includes/header_main/header_main.html" -->
 </div>

 <div id="about_us" class="about_us">
 <p>Some text.</p></div>

 <a href="portfolio/graphic/fotoanne.shtml" class="rollover" title="FotoAnne"><span class="displace"></span></a>

 <div id="aboutgreyhorsenl_title" class="aboutgreyhorsenl_title">
 <img src="images/aboutnl_image.png" alt="About Greyhorse"/></div>


 <div>
 <!--#include virtual="includes/footer_main/footer_main.html" -->
 </div>

</div>
</body>
</html>

CSS:

#wrapper{
position:relative;
z-index: 1;
margin:10px auto;
width:1100px;
}

#bg {
   width: 100%;
   height: 614px; 
   position: absolute;
   top: 93px;
   left: 0;
   background-image: url(images/stripe.png);
   background-repeat: repeat-x repeat-y;
   background-attachment: scroll;
} 

body {
background-image:url(images/Background_Homepage.png);
background-attachment: scroll;
background-repeat: repeat-x;
background-position: top;
font-family: arial;
color: #111111;
font-size: 0.75em; /* 12px/16=0.75 em */
word-spacing: 2px;
line-height: 175%;
}

.about_us {
display: block;
width: 420px;
height: 12px;
position: absolute;
left:290px;
top:-110px;
}

.aboutgreyhorsenl_title {
position: absolute;
top: 280px;
left: 400px;
}

a.rollover {
display: block;
width: 155px;
height: 115px;
text-decoration: none;
background: url("images/FotoAnne_thumbnail.png");
position: absolute;
left:735px;
top:-100px;
}

a.rollover:hover {
background-position: 775px 0;
}

.displace {
position: absolute;
left:287px;
top:-205px;
}

Еще раз спасибо за всех, кто может мне помочь!

Источник

1 ответ

В файле style.css из html5boilerplate все браузеры будут иметь одинаковые настройки по умолчанию. Добавление этого CSS-файла на ваш сайт (как первого, который будет загружен) может решить проблему.

http://html5boilerplate.com/

Источник
Другие вопросы по тегам