Проблемы с отображением в IE7 (добавление дополнительного верхнего поля) - PullRequest
Новая
       6

Проблемы с отображением в IE7 (добавление дополнительного верхнего поля)

1 голос
/ 18 декабря 2010

Мне очень трудно понять, почему IE7 добавляет дополнительные отступы на эту страницу!

Вот что делает IE7: http://imgur.com/lwyRI.png

На правильной странице будут три черные вкладки, связанные с рисунком выше. Вот как это должно выглядеть: также хранится в imgur: 64qbf.png (мне разрешена только одна ссылка)

Ссылку на страницу можно найти в img. (опять же я могу опубликовать только одну ссылку)

пожалуйста, помогите!

код css: 

<style type="text/css">
#background{
    background-image: url(/images/store/vaporIronBK.jpg);
    background-repeat:no-repeat;
    height:auto;
    width:665px;

    margin-top:125px;

    margin-left:228px;
    padding-top:5px;
    font-size:15px;
}

#background a {
    color: #ffffff;
    text-decoration: none;
}

#background a:hover {
    color: #de156d;
}

#videoLinks  {
    margin-top:52px;
    height: 100px;
}

#buy{
    width:400px;
    float:left;
    clear:both;
    padding-left:235px;
    color:#000000;
}

#video {
    float: right;
    left: 683px;
    margin-left: 35px;
    margin-top: 166px;
    width: 200px;
    color: #000000;
}

#video a {
    text-decoration: none;
    color: #000000;
}

#video a:hover {
    color: #de156d;
}

#footnotes  {
    color:#ffffff;
    margin-top: 37px;
}

#bottom-text {
    margin-left:40px;
    margin-top:445px;
    width:575px;
}

#bottom-text a {
    color: #de156d;
    text-decoration: none;
}

#bottom-text a:hover {
    color: #000000;
}

#bottom-text p {
    text-align: justify;
}

#bottom-text h2 {
    font-size: 25px;
    color: #000000;
    padding-bottom: 10px;
}

#bottom-text h3 {
    padding-bottom: 5px;
}

#bottom-text p {
    padding-bottom: 20px;
}

#bottom-text .header-text {
    padding-bottom: 25px;
}

#bottom-text p.taylor-image {
    text-align: center;
}

.tabs {
    height: 30px;
    width: 180px;
    float: left;
    margin-left: 30px;
    padding-top: 10px;
}
</style>

Ответы [ 5 ]

1 голос
/ 23 ноября 2011

Я делаю это на каждой странице: 

<body>
<!--[if IE]><div class="ie"><![endif]-->

...LALALA

<!--[if IE]></div><![endif]-->
</body>

Это называется условный комментарий. Это патентованное IE, но действует как комментарий к другим браузерам и валидаторам.

Теперь вы можете задавать определенные правила IE, используя .ie ancestor.

получить немного .ie #whwhat {position: родственник;} и положить их коробки, где они должны быть!

0 голосов
/ 29 января 2012

Вообще говоря, особенно для IE7, но в любом случае для лучшей практики всегда указывайте все стороны с отступом или полем ... другими словами, не просто используйте margin-top:? Px (? Для чего угодно) и принимайтеотдых в порядке.Лучше использовать margin:? Px 0 0 0 или любые другие значения.

Другая общая идея, особенно в IE 7 и ниже, состоит в том, чтобы не использовать margin и padding для одного и того же элемента.

Кроме того,все, что с плавающей точкой, нуждается в ширине, а что касается ошибки с двойным полем, это происходит только тогда, когда у вас есть поле на той же стороне, что и сторона, на которой плавающий элемент ...не хочу иметь маржу: 0 20px 0 0 для одной и той же вещи ... она удвоится.Лучше использовать отступы на содержащем элементе.

0 голосов
/ 18 декабря 2010

использование: 

display: inline;

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

0 голосов
/ 18 декабря 2010

Попробуйте удалить margin-top: из #background и вместо этого добавьте clear:both или clear:right для # background.

0 голосов
/ 18 декабря 2010

Не уверен, но попробуйте это в вашем CSS сделать 

body
{
    padding:0;
    margin:0;
}

http://www.w3schools.com/css/css_margin.asp http://www.w3schools.com/css/css_padding.asp

в качестве альтернативы хотел бы видеть код, опубликованный другими.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...