IE имеет разную высоту/ширину для div, чем Firefox

У меня возникают проблемы с div Высота и ширина в IE.IE имеет разную высоту/ширину для div, чем Firefox

На моей домашней странице http://www.ricominciodame.it/eventi.php есть div s с доской.
В Firefox все они работают нормально, но в IE (как 7, так и 8) ширина ниже, а фон вырезается.

Ниже мой CSS:

div.evento { 
    background : white url("images/sfondo_evento.png") top no-repeat; 
    width : 260px; 
    height : 207px; 
    margin:5px; 
    margin-left:0px; 
    margin-bottom : 20px; 
    padding-left : 20px; 
    padding-right : 20px; 
    padding-top : 20px; 
    padding-bottom : 20px; 
    color : white; 
}

Как я могу исправить эту проблему?

источник

2011-01-25 pAkY88

Ваша страница работает в IE quirks mode вызванных DOCTYPE. Вы должны использовать любой из этих http://www.w3.org/QA/2002/04/valid-dtd-list.html

Также полезно всегда проверять ваш веб-сайт, начиная с w3 validator.

источник

2011-01-25 18:01:44 Sotiris

Это решило мою проблему. Более тревожно, моя декларация HTML 5 привела к проблеме, описанной в исходном вопросе. Думаю, мир не готов для html 5? – TARKUS

Является ли ваш doctype установленным для браузера в стандартном режиме? Например:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">

источник

2011-01-25 17:58:43 Keltex

Звучит так, как будто это проблема. – TAG

Я всегда «сбрасываю» css перед тем, как создавать новую страницу. загружаю мои CSS файлы (обратите внимание, что я сначала загрузить сброс, после того, что фактическое расположение):

<link rel="stylesheet" href="css-styles/reset.css" /> 
<link rel="stylesheet" href="css-styles/all.css" />

Мой сброс CSS выглядит следующим образом:

/* CSS Document */ 

/* Clear all styles */ 
html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, font, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
dl, dt, dd, ol, ul, li, 
fieldset, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    outline: 0; 
    font-weight: inherit; 
    font-style: inherit; 
    font-size: 100%; 
    font-family: inherit; 
    vertical-align: baseline;} 

/* remember to define focus styles! */ 
:focus { 
    outline: 0;} 

body { 
    line-height: 1; 
    color: black; 
    background: white;} 

ol, ul { 
    list-style: none;} 

/* tables still need 'cellspacing="0"' in the markup */ 
table{ 
    border-collapse: separate; 
    border-spacing: 0;} 

caption, th, td { 
    text-align: left; 
    font-weight: normal;} 

blockquote:before, blockquote:after, 
q:before, q:after { 
    content: "";} 

blockquote, q { 
    quotes: "" "";} 
/*Ceal all styles END */

источник

2011-01-25 17:58:43 SuperSpy

Этот код css - это всего лишь фрагмент всего кода, перед этим фрагментом есть небольшое правило сброса: html, body, * { margin: 0; прокладка: 0; } – pAkY88

Это решило мою проблему между браузерами. Chrome и Firefox имели ту же высоту на таблицах, где IE был меньше. Я взял только верхнюю часть «Очистить все стили» и удалил вертикальную выровненность: базовая линия, потому что это испортило мои таблицы. Теперь IE, Chrome и Firefox имеют одинаковую высоту. После небольшого чтения это связано с тем, что браузеры имеют свои собственные стили по умолчанию, если стиль не представлен. Это была отличная находка, спасибо .. – Switch

может быть проблемой коробчатой модели: http://css-tricks.com/the-css-box-model/

Я хотел бы сделать что-то вроде этого:

div.evento { 
    background : white url("images/sfondo_evento.png") top no-repeat; 
    width : 300px; 
    height : 207px; 
    margin:5px; 
    margin-left:0px; 
    margin-bottom : 20px; 
    color : white; 
} 
div.evento-inner { 
    padding-left : 20px; 
    padding-right : 20px; 
    padding-top : 20px; 
    padding-bottom : 20px; 
}

в IE, заполнение занимает до 20px по каждой стороне 260px ширины вы объявляющая ,

источник

2011-01-25 18:04:43 vinhboy

IE имеет разную высоту/ширину для div, чем Firefox

ответ

Смежные вопросы