Mozilla Layout & Shadow Not Working CSS/HTML

Скрытый, чтобы узнать, что макет для этой страницы неверен как в IE, так и в Firefox, с полностью нейтральным кодом (насколько мне известно).Mozilla Layout & Shadow Not Working CSS/HTML

В IE поле, содержащее это, слишком велико для него.

В Mozilla он слишком мал.

Mozilla показывает тень окна, когда я использую свойство:

box-shadow

Что очень странно, я думал, что он использовал -moz-бокс-тень

Вот что происходит: http://i.imgur.com/SvPAP.png (эту линию на окно Mozilla из Photoshop).

Вот все связанные с ним код:

HTML:

<!DOCTYPE hmtl> 

<html> 

<head> 

    <link rel="stylesheet" type="text/css" media="screen, projection" href="page.css"/> 
    <link rel="stylesheet" type="text/css" media="screen, projection" href="text.css"/> 
    <link rel="stylesheet" href='http://fonts.googleapis.com/css?family=Arvo' /> 
    <link rel="stylesheet" href='http://fonts.googleapis.com/css?family=PT+Sans' /> 

<head> 

<body> 
    <div class="divCentre"> 
     <div class="divTitleCon"> 
      <p class="titleText">What Is This?</p> 
     </div> 
     <div class="divContentCon"> 
      <p class="contentText"> 

       TEXT 

       <br /><br /> 

       TEXT 

       <br /><br /> 

       TEXT 

       <br /><br /> 

       <span class="footerText"> 

        TEXT 

       </span> 

      </p> 
     </div> 
    </div> 
</body> 

</html>

CSS PAGE:

html, body 
{ 
    margin: 0; 
    padding: 0; 
} 
body 
{ 
    background-color: rgb(241, 250, 253); 
} 
.divCentre 
{ 
    position:absolute; 

    top: -25%; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    margin: auto; 

    width: 380px; 
    height: 230px; 

    padding: 20px; 

    overflow: hidden; 

    border: 1px solid rgba(200, 200, 200, 1); /* BORDER */ 

    background-color: rgba(255, 255, 255, 1); /* BACKGROUND */ 

    color: rgb(100, 100, 100); 


    -moz-box-shadow: 
       0px 0px 5px rgba(130, 130, 130, 0.2), /* OUTER SHADOW */ 
      inset 0px 0px 5px rgba(0, 0, 0, 0.05); /* INNER SHADOW */ 
    -webkit-box-shadow: 
       0px 0px 5px rgba(130, 130, 130, 0.2), /* OUTER SHADOW */ 
      inset 0px 0px 5px rgba(0, 0, 0, 0.05); /* INNER SHADOW */ 
} 
.divTitleCon 
{ 
    position: relative; 

    width: 100%; 
    height: 15%; 
} 
.divContentCon 
{ 
    position: relative; 

    margin-top: 20px; 

    width: 100%; 
    height: auto; 
    max-height: 80%; 

    word-wrap: break-word; 

    overflow: hidden; 
}

CSS TEXT:

p 
{ 
    margin: 0; 
    padding: 0; 
} 

.titleText 
{ 
    font: 32px Arvo; 
    text-shadow: 0px 1px rgb(255,255,255); 
} 

.contentText 
{ 
    font: 14px PT Sans; 
    color: rgb(150, 150, 150); 
    text-shadow: 0px 1px rgb(255,255,255); 
} 

.footerText 
{ 
    color: rgb(200, 200, 200); 
}

источник

2012-12-08 ツ.jp

Похоже, что Mozzila и Chrome отображают текст совершенно по-разному (текст здесь находится из API шрифтов Google, возможно, более локальная версия не будет иметь этой проблемы. Я буду экспериментировать).

В любом случае важно указать высоту линии и использовать общий шрифт.

Задать вопрос line-height исправьте промежуток между строками, разнесенный на <br /><br />, однако количество текста на этой строке будет отличаться.

Firefox, как правило, сквош вместе, в то время как Google предоставил его «правильно», что понятно. Шрифты API Google, вероятно, оптимизированы для -webkit- или их вилки.

В любом случае это раздражает, но требуется обходное решение.

TL; ДР:

Фиксированный путем изменения:

font: 14px PT Sans;

font: 14px Arial, Sans-Serif; 
    line-height: 14px;

источник

2012-12-08 17:15:59

ответ

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