Как настроить FireFox CSS

Задача: У меня возникли проблемы с таргетингом на FireFox и IE css.Как настроить FireFox CSS

Ниже то, что я делаю пытается предназначаться FF:

@-moz-document url-prefix(){ 
    .centerSpinner{ 
     top:300% !important; 
    } 
}

Однако, он не толкать вертушку к центру:

В Chrome, погрузкой и блесны являются в центре страницы. Вот полный CSS:

\t #floatingCirclesG{ 
 
\t position:relative; 
 
\t width:125px; 
 
\t height:125px; 
 
\t margin:auto; 
 
\t transform:scale(0.6); 
 
\t \t -o-transform:scale(0.6); 
 
\t \t -ms-transform:scale(0.6); 
 
\t \t -webkit-transform:scale(0.6); 
 
\t \t -moz-transform:scale(0.6); 
 
\t } 
 

 
\t .f_circleG{ 
 
\t \t position:absolute; 
 
\t \t background-color:rgb(255,255,255); 
 
\t \t height:22px; 
 
\t \t width:22px; 
 
\t \t border-radius:12px; 
 
\t \t \t -o-border-radius:12px; 
 
\t \t \t -ms-border-radius:12px; 
 
\t \t \t -webkit-border-radius:12px; 
 
\t \t \t -moz-border-radius:12px; 
 
\t \t animation-name:f_fadeG; 
 
\t \t \t -o-animation-name:f_fadeG; 
 
\t \t \t -ms-animation-name:f_fadeG; 
 
\t \t \t -webkit-animation-name:f_fadeG; 
 
\t \t \t -moz-animation-name:f_fadeG; 
 
\t \t animation-duration:1.2s; 
 
\t \t \t -o-animation-duration:1.2s; 
 
\t \t \t -ms-animation-duration:1.2s; 
 
\t \t \t -webkit-animation-duration:1.2s; 
 
\t \t \t -moz-animation-duration:1.2s; 
 
\t \t animation-iteration-count:infinite; 
 
\t \t \t -o-animation-iteration-count:infinite; 
 
\t \t \t -ms-animation-iteration-count:infinite; 
 
\t \t \t -webkit-animation-iteration-count:infinite; 
 
\t \t \t -moz-animation-iteration-count:infinite; 
 
\t \t animation-direction:normal; 
 
\t \t \t -o-animation-direction:normal; 
 
\t \t \t -ms-animation-direction:normal; 
 
\t \t \t -webkit-animation-direction:normal; 
 
\t \t \t -moz-animation-direction:normal; 
 
\t } 
 

 
\t #frotateG_01{ 
 
\t \t left:0; 
 
\t \t top:51px; 
 
\t \t animation-delay:0.45s; 
 
\t \t \t -o-animation-delay:0.45s; 
 
\t \t \t -ms-animation-delay:0.45s; 
 
\t \t \t -webkit-animation-delay:0.45s; 
 
\t \t \t -moz-animation-delay:0.45s; 
 
\t } 
 

 
\t #frotateG_02{ 
 
\t \t left:15px; 
 
\t \t top:15px; 
 
\t \t animation-delay:0.6s; 
 
\t \t \t -o-animation-delay:0.6s; 
 
\t \t \t -ms-animation-delay:0.6s; 
 
\t \t \t -webkit-animation-delay:0.6s; 
 
\t \t \t -moz-animation-delay:0.6s; 
 
\t } 
 

 
\t #frotateG_03{ 
 
\t \t left:51px; 
 
\t \t top:0; 
 
\t \t animation-delay:0.75s; 
 
\t \t \t -o-animation-delay:0.75s; 
 
\t \t \t -ms-animation-delay:0.75s; 
 
\t \t \t -webkit-animation-delay:0.75s; 
 
\t \t \t -moz-animation-delay:0.75s; 
 
\t } 
 

 
\t #frotateG_04{ 
 
\t \t right:15px; 
 
\t \t top:15px; 
 
\t \t animation-delay:0.9s; 
 
\t \t \t -o-animation-delay:0.9s; 
 
\t \t \t -ms-animation-delay:0.9s; 
 
\t \t \t -webkit-animation-delay:0.9s; 
 
\t \t \t -moz-animation-delay:0.9s; 
 
\t } 
 

 
\t #frotateG_05{ 
 
\t \t right:0; 
 
\t \t top:51px; 
 
\t \t animation-delay:1.05s; 
 
\t \t \t -o-animation-delay:1.05s; 
 
\t \t \t -ms-animation-delay:1.05s; 
 
\t \t \t -webkit-animation-delay:1.05s; 
 
\t \t \t -moz-animation-delay:1.05s; 
 
\t } 
 

 
\t #frotateG_06{ 
 
\t \t right:15px; 
 
\t \t bottom:15px; 
 
\t \t animation-delay:1.2s; 
 
\t \t \t -o-animation-delay:1.2s; 
 
\t \t \t -ms-animation-delay:1.2s; 
 
\t \t \t -webkit-animation-delay:1.2s; 
 
\t \t \t -moz-animation-delay:1.2s; 
 
\t } 
 

 
\t #frotateG_07{ 
 
\t \t left:51px; 
 
\t \t bottom:0; 
 
\t \t animation-delay:1.35s; 
 
\t \t \t -o-animation-delay:1.35s; 
 
\t \t \t -ms-animation-delay:1.35s; 
 
\t \t \t -webkit-animation-delay:1.35s; 
 
\t \t \t -moz-animation-delay:1.35s; 
 
\t } 
 

 
\t #frotateG_08{ 
 
\t \t left:15px; 
 
\t \t bottom:15px; 
 
\t \t animation-delay:1.5s; 
 
\t \t \t -o-animation-delay:1.5s; 
 
\t \t \t -ms-animation-delay:1.5s; 
 
\t \t \t -webkit-animation-delay:1.5s; 
 
\t \t \t -moz-animation-delay:1.5s; 
 
\t } 
 

 

 

 
\t @keyframes f_fadeG{ 
 
\t \t 0%{ 
 
\t \t \t background-color:rgb(0,0,0); 
 
\t \t } 
 

 
\t \t 100%{ 
 
\t \t \t background-color:rgb(255,255,255); 
 
\t \t } 
 
\t } 
 

 
\t @-o-keyframes f_fadeG{ 
 
\t \t 0%{ 
 
\t \t \t background-color:rgb(0,0,0); 
 
\t \t } 
 

 
\t \t 100%{ 
 
\t \t \t background-color:rgb(255,255,255); 
 
\t \t } 
 
\t } 
 

 
\t @-ms-keyframes f_fadeG{ 
 
\t \t 0%{ 
 
\t \t \t background-color:rgb(0,0,0); 
 
\t \t } 
 

 
\t \t 100%{ 
 
\t \t \t background-color:rgb(255,255,255); 
 
\t \t } 
 
\t } 
 

 
\t @-webkit-keyframes f_fadeG{ 
 
\t \t 0%{ 
 
\t \t \t background-color:rgb(0,0,0); 
 
\t \t } 
 

 
\t \t 100%{ 
 
\t \t \t background-color:rgb(255,255,255); 
 
\t \t } 
 
\t } 
 

 
\t @-moz-keyframes f_fadeG{ 
 
\t \t 0%{ 
 
\t \t \t background-color:rgb(0,0,0); 
 
\t \t } 
 

 
\t \t 100%{ 
 
\t \t \t background-color:rgb(255,255,255); 
 
\t \t } 
 
\t } 
 
\t 
 
\t @-moz-document url-prefix(){ 
 
\t \t .centerSpinner{ 
 
\t \t \t top:300% !important; 
 
\t \t } 
 
\t } 
 
\t 
 
\t .background{ 
 
\t \t background-color: rgba(0,0,0,.6); 
 
\t } 
 
\t 
 
\t .centerSpinner{ 
 
\t \t position:relative; top:35%; 
 
\t } 
 
\t 
 
\t .loadCSS{text-align:center; top:100%; position:relative; font-size:37pt !important; right:15%;}

<body class="background"> 
 
\t \t <div class="centerSpinner" id="floatingCirclesG"> 
 
\t \t \t <div class="f_circleG" id="frotateG_01"></div> 
 
\t \t \t <div class="f_circleG" id="frotateG_02"></div> 
 
\t \t \t <div class="f_circleG" id="frotateG_03"></div> 
 
\t \t \t <div class="f_circleG" id="frotateG_04"></div> 
 
\t \t \t <div class="f_circleG" id="frotateG_05"></div> 
 
\t \t \t <div class="f_circleG" id="frotateG_06"></div> 
 
\t \t \t <div class="f_circleG" id="frotateG_07"></div> 
 
\t \t \t <div class="f_circleG" id="frotateG_08"></div> 
 
\t \t \t <div class="loadCSS">Loading...</div> 
 
\t \t </div> 
 
</body>

источник

2017-02-08 Roberto Flores

Они понижают префикс, когда это их стандарт. – PHPglue

@PHPglue, как бы я нацелился на все FF? –

Ваша цель работает нормально, цвет теста: красный; например. если вы используете более тяжелый селектор, тогда он должен работать лучше: #floatingCirclesG, и, наконец, верх: 35vh будет делать ....чтобы узнать, что tat должен работать для большей части браузера, и фильтрация FF становится ненужной;) http://codepen.io/anon/pen/MJqJLP –

здесь несколько способов центрирования окна без абсолютного и не трансформирует:

прогибается

html { 
 
    height:100%; 
 
    display:flex; 
 
} 
 
body { 
 
    margin:auto; 
 
} 
 
/* add your css spinner here */

<div>body content at center <br/> to replace with your spinner</div>

стол/стол-элементная CSS

html { 
 
    height:100%; 
 
    width:100%; 
 
    display:table; 
 
    } 
 
body { 
 
    display:table-cell; 
 
    text-align:center; 
 
    vertical-align:middle; 
 
    } 
 
div { 
 
    border:solid; 
 
    display:inline-block; 
 
    } 
 

 
/* add your css spinner here */

<div>body content at center <br/> to replace with your spinner</div>

встроенный блок (старые браузеры)

html, body , body:before { 
 
    height:100%; 
 
    margin:0; 
 
    text-align:center; 
 
    } 
 
body:before {/* or for very old browser a real tag in case your target also IE5 to IE7*/ 
 
    content:''; 
 
    } 
 
body:before, div { 
 
    display:inline-block; 
 
    vertical-align:middle; 
 
    } 
 

 
/* add your css spinner here */

<div>body content at center <br/> to replace with your spinner</div>

источник

2017-02-08 01:12:57

@ GCyrillus: Я пробовал все эти подходы, и все же он не показать какие-либо различия в FF или IE ' –

@RobertoFlores, может быть, пришло время настроить фрагмент и скрипку/codepen, которые показывают живую вашу проблему, если ваш фрагмент в вашем вопросе действительно ломается в моем FF, он также ломается в моем Chrome, Opera и IE ... –

\t #floatingCirclesG{ 
 
\t \t position:absolute; 
 
\t \t width:125px; 
 
\t \t height:125px; 
 
\t \t margin-top: -62px; 
 
     margin-left: -62px; 
 
\t \t top:50%; 
 
     left: 50%; 
 
\t \t transform:scale(0.6); 
 
\t \t -o-transform:scale(0.6); 
 
\t \t -ms-transform:scale(0.6); 
 
\t \t -webkit-transform:scale(0.6); 
 
\t \t -moz-transform:scale(0.6); 
 
\t } 
 

 
\t .f_circleG{ 
 
\t \t position:absolute; 
 
\t \t background-color:rgb(255,255,255); 
 
\t \t height:22px; 
 
\t \t width:22px; 
 
\t \t border-radius:12px; 
 
\t \t \t -o-border-radius:12px; 
 
\t \t \t -ms-border-radius:12px; 
 
\t \t \t -webkit-border-radius:12px; 
 
\t \t \t -moz-border-radius:12px; 
 
\t \t animation-name:f_fadeG; 
 
\t \t \t -o-animation-name:f_fadeG; 
 
\t \t \t -ms-animation-name:f_fadeG; 
 
\t \t \t -webkit-animation-name:f_fadeG; 
 
\t \t \t -moz-animation-name:f_fadeG; 
 
\t \t animation-duration:1.2s; 
 
\t \t \t -o-animation-duration:1.2s; 
 
\t \t \t -ms-animation-duration:1.2s; 
 
\t \t \t -webkit-animation-duration:1.2s; 
 
\t \t \t -moz-animation-duration:1.2s; 
 
\t \t animation-iteration-count:infinite; 
 
\t \t \t -o-animation-iteration-count:infinite; 
 
\t \t \t -ms-animation-iteration-count:infinite; 
 
\t \t \t -webkit-animation-iteration-count:infinite; 
 
\t \t \t -moz-animation-iteration-count:infinite; 
 
\t \t animation-direction:normal; 
 
\t \t \t -o-animation-direction:normal; 
 
\t \t \t -ms-animation-direction:normal; 
 
\t \t \t -webkit-animation-direction:normal; 
 
\t \t \t -moz-animation-direction:normal; 
 
\t } 
 

 
\t #frotateG_01{ 
 
\t \t left:0; 
 
\t \t top:51px; 
 
\t \t animation-delay:0.45s; 
 
\t \t \t -o-animation-delay:0.45s; 
 
\t \t \t -ms-animation-delay:0.45s; 
 
\t \t \t -webkit-animation-delay:0.45s; 
 
\t \t \t -moz-animation-delay:0.45s; 
 
\t } 
 

 
\t #frotateG_02{ 
 
\t \t left:15px; 
 
\t \t top:15px; 
 
\t \t animation-delay:0.6s; 
 
\t \t \t -o-animation-delay:0.6s; 
 
\t \t \t -ms-animation-delay:0.6s; 
 
\t \t \t -webkit-animation-delay:0.6s; 
 
\t \t \t -moz-animation-delay:0.6s; 
 
\t } 
 

 
\t #frotateG_03{ 
 
\t \t left:51px; 
 
\t \t top:0; 
 
\t \t animation-delay:0.75s; 
 
\t \t \t -o-animation-delay:0.75s; 
 
\t \t \t -ms-animation-delay:0.75s; 
 
\t \t \t -webkit-animation-delay:0.75s; 
 
\t \t \t -moz-animation-delay:0.75s; 
 
\t } 
 

 
\t #frotateG_04{ 
 
\t \t right:15px; 
 
\t \t top:15px; 
 
\t \t animation-delay:0.9s; 
 
\t \t \t -o-animation-delay:0.9s; 
 
\t \t \t -ms-animation-delay:0.9s; 
 
\t \t \t -webkit-animation-delay:0.9s; 
 
\t \t \t -moz-animation-delay:0.9s; 
 
\t } 
 

 
\t #frotateG_05{ 
 
\t \t right:0; 
 
\t \t top:51px; 
 
\t \t animation-delay:1.05s; 
 
\t \t \t -o-animation-delay:1.05s; 
 
\t \t \t -ms-animation-delay:1.05s; 
 
\t \t \t -webkit-animation-delay:1.05s; 
 
\t \t \t -moz-animation-delay:1.05s; 
 
\t } 
 

 
\t #frotateG_06{ 
 
\t \t right:15px; 
 
\t \t bottom:15px; 
 
\t \t animation-delay:1.2s; 
 
\t \t \t -o-animation-delay:1.2s; 
 
\t \t \t -ms-animation-delay:1.2s; 
 
\t \t \t -webkit-animation-delay:1.2s; 
 
\t \t \t -moz-animation-delay:1.2s; 
 
\t } 
 

 
\t #frotateG_07{ 
 
\t \t left:51px; 
 
\t \t bottom:0; 
 
\t \t animation-delay:1.35s; 
 
\t \t \t -o-animation-delay:1.35s; 
 
\t \t \t -ms-animation-delay:1.35s; 
 
\t \t \t -webkit-animation-delay:1.35s; 
 
\t \t \t -moz-animation-delay:1.35s; 
 
\t } 
 

 
\t #frotateG_08{ 
 
\t \t left:15px; 
 
\t \t bottom:15px; 
 
\t \t animation-delay:1.5s; 
 
\t \t \t -o-animation-delay:1.5s; 
 
\t \t \t -ms-animation-delay:1.5s; 
 
\t \t \t -webkit-animation-delay:1.5s; 
 
\t \t \t -moz-animation-delay:1.5s; 
 
\t } 
 

 

 

 
\t @keyframes f_fadeG{ 
 
\t \t 0%{ 
 
\t \t \t background-color:rgb(0,0,0); 
 
\t \t } 
 

 
\t \t 100%{ 
 
\t \t \t background-color:rgb(255,255,255); 
 
\t \t } 
 
\t } 
 

 
\t @-o-keyframes f_fadeG{ 
 
\t \t 0%{ 
 
\t \t \t background-color:rgb(0,0,0); 
 
\t \t } 
 

 
\t \t 100%{ 
 
\t \t \t background-color:rgb(255,255,255); 
 
\t \t } 
 
\t } 
 

 
\t @-ms-keyframes f_fadeG{ 
 
\t \t 0%{ 
 
\t \t \t background-color:rgb(0,0,0); 
 
\t \t } 
 

 
\t \t 100%{ 
 
\t \t \t background-color:rgb(255,255,255); 
 
\t \t } 
 
\t } 
 

 
\t @-webkit-keyframes f_fadeG{ 
 
\t \t 0%{ 
 
\t \t \t background-color:rgb(0,0,0); 
 
\t \t } 
 

 
\t \t 100%{ 
 
\t \t \t background-color:rgb(255,255,255); 
 
\t \t } 
 
\t } 
 

 
\t @-moz-keyframes f_fadeG{ 
 
\t \t 0%{ 
 
\t \t \t background-color:rgb(0,0,0); 
 
\t \t } 
 

 
\t \t 100%{ 
 
\t \t \t background-color:rgb(255,255,255); 
 
\t \t } 
 
\t } 
 

 
\t @-moz-document url-prefix(){ .centerSpinner{ color:red; top:500px; } } 
 
\t 
 
\t .background{ 
 
\t \t background-color: rgba(0,0,0,.6); 
 
\t } 
 
\t 
 
\t .centerSpinner{top:35%;} 
 

 
\t .loadCSS{text-align:center; top:100%; position:relative; font-size:37pt !important; right:15%;}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Useless</title> 
 
    <link rel="stylesheet" href="style.css" type="text/css" /> 
 
    <script type='text/javascript' src='http://code.jquery.com/jquery-1.11.0.min.js'></script> 
 
    <script type='text/javascript' src='script.js'></script> 
 
</head> 
 

 
<body class="background"> 
 
    <div> 
 
     <!-- This div will be centered --> 
 
    </div> 
 
    <div class="centerSpinner" id="floatingCirclesG"> 
 
     <div class="f_circleG" id="frotateG_01"></div> 
 
     <div class="f_circleG" id="frotateG_02"></div> 
 
     <div class="f_circleG" id="frotateG_03"></div> 
 
     <div class="f_circleG" id="frotateG_04"></div> 
 
     <div class="f_circleG" id="frotateG_05"></div> 
 
     <div class="f_circleG" id="frotateG_06"></div> 
 
     <div class="f_circleG" id="frotateG_07"></div> 
 
     <div class="f_circleG" id="frotateG_08"></div> 
 
     <div class="loadCSS">Loading...</div> 
 
    </div> 
 
</body> 
 

 
</html>

Вот мой обновленный ответ. Таким образом, ваша проблема заключается в том, что div, держащий прядильщик, располагался относительно тела, а тело было всего в несколько сотен пикселей. Теперь, если вы поместите свое абсолютное абсолютное значение (что означает, что вы удаляете div из его естественного потока в DOM), в этом случае он будет абсолютно позиционирован для браузера. (Это может измениться, если у вас есть относительная позиция родительской позиции, поэтому она будет абсолютной позицией для родителя, но в этом случае нет родительской позиции относительной позиции, поэтому она берет в качестве ссылки)

Изменение, которое вы применяете код, который я вам послал и вуаля! он должен работать:

#floatingCirclesG{ 
    position:absolute; 
    width:125px; 
    height:125px; 
    margin-top: -62px; 
    margin-left: -62px; 
    top:50%; 
    left: 50%; 
    transform:scale(0.6); 
    -o-transform:scale(0.6); 
    -ms-transform:scale(0.6); 
    -webkit-transform:scale(0.6); 
    -moz-transform:scale(0.6); 
}

Пожалуйста, проверьте эту ссылку, чтобы понять, почему это работает ... надеется, что это помогает http://patosalazar.com/journal/css-snippets-awesome-one-liners/

источник

2017-02-08 03:29:46

Я пробовал ваши подходы, которые вы предоставили, и он по-прежнему не отображает счетчик в центре для FF, а также в IE –

вы можете отправить вам код в скрипке или плункере, чтобы поиграть с ним? –

jsfiddle: https://jsfiddle.net/robontrix/7zqgzqhp/#&togetherjs=gjqHwcAcLh –

Как настроить FireFox CSS

ответ

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