CSS - ошибка Mozilla?box-shadow: вставка не работает должным образом - PullRequest
Новая
       10

CSS - ошибка Mozilla?box-shadow: вставка не работает должным образом

6 голосов
/ 13 октября 2011

В основном приведенный ниже код должен быть просто белой страницей с тенью по краю.Это прекрасно работает в Chrome, но я не могу заставить его работать в Firefox! 

<html>
<head>
<style type=text/css>
body {
background:#ffffff;
font-family:arial;
margin:auto;
box-shadow:inset 0px 0px 100px #333333;
-moz-box-shadow:inset 0px 0px 100px #333333;
-webkit-box-shadow:inset 0px 0px 100px #333333;
}
</style>
</head>
<body>
</body>
</html>

Просмотреть страницу здесь:

http://pastehtml.com/view/bagevr6ke.html

Посмотрите наэто в Chrome, а затем Firefox, и скажите мне, если вы видите разницуузнал о странном режиме и типах учений:)

Однако страница CSS, над которой я работаю, все еще страдает от этой ошибки, независимо от того, какой сброс я использую.В настоящее время я не использую Doctype, так как я не уверен, что я должен поставить, или это исправит ошибку.

Вот полный сайт:

http://middle.dyndns -server.com / results.html

И таблица стилей: 

body {
background:url('bg.png');
font-family:arial;
margin:auto;
box-shadow:inset 0px 0px 100px #333333;
-moz-box-shadow: inset 0px 0px 100px #333333;
-webkit-box-shadow:inset 0px 0px 100px #333333;
}

#footer {
padding-bottom:10px;
margin-top:30px;
}

#page {
width:960px;
height:auto;

background-color:#ffffff;
#background:url('bg2.png');

/*Space*/
padding-top:0px;
padding-bottom:0px;
padding-left:0px;
padding-right:0px;
margin-top:-10px;
margin-bottom:0px;
margin-left:auto;
margin-right:auto;

/*Shadow*/
-moz-box-shadow: 0px 0px 100px 0px #999999,inset 0 0 10px #000000;
-webkit-box-shadow: 0px 0px 100px 0px #999999,inset 0 0 10px #000000;
box-shadow: 0px 0px 100px 0px #999999,inset 0 0 10px #000000;

/*Border Radius*/
border-radius:0px 0px 20px 20px;
-moz-border-radius:0px 0px 20px 20px;
-webkit-border-radius:0px 0px 20px 20px;
-o-border-radius:0px 0px 20px 20px;

}

input[type=text] {
background: -webkit-gradient(linear,left top,right bottom,from(#333333),to(#666666));
        background: -moz-linear-gradient(top, #333333, #666666);
        filter: filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#666666'); 

border-width:1px;
border-style:solid;
border-color:#777777;
color:ffffff;
}

.line1 { 
float:left;
align:center; 
padding-bottom:0px;
}

hr { 
clear:left;
color:#111111;
}

/* The *normal* state styling */
.btn{
background-image:linear-gradient(90deg, rgba(51, 51, 51, 0.8), rgba(0, 0, 0, 0.2));
    background-image:-webkit-gradient(linear, 0% bottom, 0% top,color-stop(0%, rgba(51, 51, 51, 0.8)), color-stop(100%, rgba(0, 0, 0, 0.2)));
    background-image:-moz-linear-gradient(90deg, rgba(51, 51, 51, 0.8), rgba(0, 0, 0, 0.2));
    filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#80333333', EndColorStr='#20000000');
    -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#80333333', EndColorStr='#20000000')";
    background-color:rgb(51, 51, 51);
    border:1px solid rgb(0, 0, 0);
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    padding:5px 10px;
box-shadow:0px 0px 6px rgb(130, 130, 130);
    -moz-box-shadow:0px 0px 6px rgb(130, 130, 130);
    -webkit-box-shadow:0px 0px 6px rgb(130, 130, 130);
    font-size:12px;
    font-weight:normal;
    color:rgb(255, 255, 255);
    text-shadow:0px 0px 1px rgb(255, 255, 255);
}
/* The *hover* state styling */
.btn:hover{
    background-image:linear-gradient(-90deg, rgba(51, 51, 51, 0.8), rgba(0, 0, 0, 0.2));
    background-image:-webkit-gradient(linear, left top, left bottom,color-stop(0%, rgba(51, 51, 51, 0.8)), color-stop(100%, rgba(0, 0, 0, 0.2)));
    background-image:-moz-linear-gradient(-90deg, rgba(51, 51, 51, 0.8), rgba(0, 0, 0, 0.2));
    box-shadow:0px 0px 6px rgb(0, 0, 0);
    -moz-box-shadow:0px 0px 6px rgb(0, 0, 0);
    -webkit-box-shadow:0px 0px 6px rgb(0, 0, 0);
}

/* The *active* state styling */
.btn:active,.btn:focus{
    background-image:linear-gradient(90deg, rgba(51, 51, 51, 0.8), rgba(0, 0, 0, 0.2));
    background-image:-webkit-gradient(linear, 0% bottom, 0% top,color-stop(0%, rgba(51, 51, 51, 0.8)), color-stop(100%, rgba(0, 0, 0, 0.2)));
    background-image:-moz-linear-gradient(90deg, rgba(51, 51, 51, 0.8), rgba(0, 0, 0, 0.2));
}

a {
font-family:arial;
outline:none;
text-decoration:none;
color:333333;
}

a:link {
text-decoration:none;
}

a:visited {
text-decoration:none;
}

a:active {
text-decoration:none;
color:ffffff;
}

a:hover {
text-decoration:none;
}

Я уверен, что не все замечательно, но я учусь, и этот вопрос сейчас является моим основным направлением:)

Большое спасибо.

Ответы [ 3 ]

3 голосов
/ 13 октября 2011

Добавьте это: 

html, body {
    height: 100%
}

http://jsbin.com/oyuzug

В body нет ничего, поэтому он не имеет высоты.

Единственная причина, по которой он работалэто связано с тем, что в Chrome вы не указали тип документа в качестве первой строки для включения режима стандартов.

Проверьте их в Chrome:

Ваш исходный код: http://jsbin.com/urimah

Ваш исходный код с типом документа: http://jsbin.com/urimah/2

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

2 голосов
/ 13 октября 2011

Firefox показывает вам правильную вещь, потому что сейчас body не имеет height.Таким образом, вы должны определить height вашего body.

. Напишите это в своем CSS:

0 голосов
/ 09 сентября 2012

Итак, ответ помечен как правильный CSS - ошибка Mozilla?box-shadow: вставка не работает должным образом не работает для меня.Зачем?Потому что в примере нет контента.Когда вы стилизуете элементы <body> и <html> с помощью height: 100%, это создает странную ошибку, при которой 100% технически регистрируется как 100% области просмотра, а не как 100% высоты окна .

Это отличный пример того, как сделать это правильно: http://www.dave -woods.co.uk / wp-content / uploads / 2008/01 / full-height-updated.html ,Стилизация элементов body и html в height: 100% является правильной, однако ваша внутренняя тень должна быть присоединена к другому элементу (не может быть body или html), а затем min-height: 100%как box-shadow: 0 0 100px #000 прикрепленный к прокладке, например 

html, body { height: 100% }
#styled-div { 
   min-height: 100%;
   box-shadow: 0 0 100px #000;
}
...