如何定位FireFox CSS
问题：我遇到了针对FireFox和IE css样式的问题。
以下是我正在尝试定位FF：
@-moz-document url-prefix(){
.centerSpinner{
top:300% !important;
}
}
然而，它并没有将微调器推向中心：
在Chrome中，加载和微调器位于页面的中心。这是完整的CSS：
#floatingCirclesG{
position:relative;
width:125px;
height:125px;
margin:auto;
transform:scale(0.6);
-o-transform:scale(0.6);
-ms-transform:scale(0.6);
-webkit-transform:scale(0.6);
-moz-transform:scale(0.6);
}
.f_circleG{
position:absolute;
background-color:rgb(255,255,255);
height:22px;
width:22px;
border-radius:12px;
-o-border-radius:12px;
-ms-border-radius:12px;
-webkit-border-radius:12px;
-moz-border-radius:12px;
animation-name:f_fadeG;
-o-animation-name:f_fadeG;
-ms-animation-name:f_fadeG;
-webkit-animation-name:f_fadeG;
-moz-animation-name:f_fadeG;
animation-duration:1.2s;
-o-animation-duration:1.2s;
-ms-animation-duration:1.2s;
-webkit-animation-duration:1.2s;
-moz-animation-duration:1.2s;
animation-iteration-count:infinite;
-o-animation-iteration-count:infinite;
-ms-animation-iteration-count:infinite;
-webkit-animation-iteration-count:infinite;
-moz-animation-iteration-count:infinite;
animation-direction:normal;
-o-animation-direction:normal;
-ms-animation-direction:normal;
-webkit-animation-direction:normal;
-moz-animation-direction:normal;
}
#frotateG_01{
left:0;
top:51px;
animation-delay:0.45s;
-o-animation-delay:0.45s;
-ms-animation-delay:0.45s;
-webkit-animation-delay:0.45s;
-moz-animation-delay:0.45s;
}
#frotateG_02{
left:15px;
top:15px;
animation-delay:0.6s;
-o-animation-delay:0.6s;
-ms-animation-delay:0.6s;
-webkit-animation-delay:0.6s;
-moz-animation-delay:0.6s;
}
#frotateG_03{
left:51px;
top:0;
animation-delay:0.75s;
-o-animation-delay:0.75s;
-ms-animation-delay:0.75s;
-webkit-animation-delay:0.75s;
-moz-animation-delay:0.75s;
}
#frotateG_04{
right:15px;
top:15px;
animation-delay:0.9s;
-o-animation-delay:0.9s;
-ms-animation-delay:0.9s;
-webkit-animation-delay:0.9s;
-moz-animation-delay:0.9s;
}
#frotateG_05{
right:0;
top:51px;
animation-delay:1.05s;
-o-animation-delay:1.05s;
-ms-animation-delay:1.05s;
-webkit-animation-delay:1.05s;
-moz-animation-delay:1.05s;
}
#frotateG_06{
right:15px;
bottom:15px;
animation-delay:1.2s;
-o-animation-delay:1.2s;
-ms-animation-delay:1.2s;
-webkit-animation-delay:1.2s;
-moz-animation-delay:1.2s;
}
#frotateG_07{
left:51px;
bottom:0;
animation-delay:1.35s;
-o-animation-delay:1.35s;
-ms-animation-delay:1.35s;
-webkit-animation-delay:1.35s;
-moz-animation-delay:1.35s;
}
#frotateG_08{
left:15px;
bottom:15px;
animation-delay:1.5s;
-o-animation-delay:1.5s;
-ms-animation-delay:1.5s;
-webkit-animation-delay:1.5s;
-moz-animation-delay:1.5s;
}
@keyframes f_fadeG{
0%{
background-color:rgb(0,0,0);
}
100%{
background-color:rgb(255,255,255);
}
}
@-o-keyframes f_fadeG{
0%{
background-color:rgb(0,0,0);
}
100%{
background-color:rgb(255,255,255);
}
}
@-ms-keyframes f_fadeG{
0%{
background-color:rgb(0,0,0);
}
100%{
background-color:rgb(255,255,255);
}
}
@-webkit-keyframes f_fadeG{
0%{
background-color:rgb(0,0,0);
}
100%{
background-color:rgb(255,255,255);
}
}
@-moz-keyframes f_fadeG{
0%{
background-color:rgb(0,0,0);
}
100%{
background-color:rgb(255,255,255);
}
}
@-moz-document url-prefix(){
.centerSpinner{
top:300% !important;
}
}
.background{
background-color: rgba(0,0,0,.6);
}
.centerSpinner{
position:relative; top:35%;
}
.loadCSS{text-align:center; top:100%; position:relative; font-size:37pt !important; right:15%;}<body class="background">
<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>
2 个答案:
答案 0 :(得分：0)
这里有几种方法可以让你的盒子居中而不是绝对的，也不会变换：
- 柔性
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>
- table / table-cell 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>
答案 1 :(得分：0)
#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);
}
.f_circleG{
position:absolute;
background-color:rgb(255,255,255);
height:22px;
width:22px;
border-radius:12px;
-o-border-radius:12px;
-ms-border-radius:12px;
-webkit-border-radius:12px;
-moz-border-radius:12px;
animation-name:f_fadeG;
-o-animation-name:f_fadeG;
-ms-animation-name:f_fadeG;
-webkit-animation-name:f_fadeG;
-moz-animation-name:f_fadeG;
animation-duration:1.2s;
-o-animation-duration:1.2s;
-ms-animation-duration:1.2s;
-webkit-animation-duration:1.2s;
-moz-animation-duration:1.2s;
animation-iteration-count:infinite;
-o-animation-iteration-count:infinite;
-ms-animation-iteration-count:infinite;
-webkit-animation-iteration-count:infinite;
-moz-animation-iteration-count:infinite;
animation-direction:normal;
-o-animation-direction:normal;
-ms-animation-direction:normal;
-webkit-animation-direction:normal;
-moz-animation-direction:normal;
}
#frotateG_01{
left:0;
top:51px;
animation-delay:0.45s;
-o-animation-delay:0.45s;
-ms-animation-delay:0.45s;
-webkit-animation-delay:0.45s;
-moz-animation-delay:0.45s;
}
#frotateG_02{
left:15px;
top:15px;
animation-delay:0.6s;
-o-animation-delay:0.6s;
-ms-animation-delay:0.6s;
-webkit-animation-delay:0.6s;
-moz-animation-delay:0.6s;
}
#frotateG_03{
left:51px;
top:0;
animation-delay:0.75s;
-o-animation-delay:0.75s;
-ms-animation-delay:0.75s;
-webkit-animation-delay:0.75s;
-moz-animation-delay:0.75s;
}
#frotateG_04{
right:15px;
top:15px;
animation-delay:0.9s;
-o-animation-delay:0.9s;
-ms-animation-delay:0.9s;
-webkit-animation-delay:0.9s;
-moz-animation-delay:0.9s;
}
#frotateG_05{
right:0;
top:51px;
animation-delay:1.05s;
-o-animation-delay:1.05s;
-ms-animation-delay:1.05s;
-webkit-animation-delay:1.05s;
-moz-animation-delay:1.05s;
}
#frotateG_06{
right:15px;
bottom:15px;
animation-delay:1.2s;
-o-animation-delay:1.2s;
-ms-animation-delay:1.2s;
-webkit-animation-delay:1.2s;
-moz-animation-delay:1.2s;
}
#frotateG_07{
left:51px;
bottom:0;
animation-delay:1.35s;
-o-animation-delay:1.35s;
-ms-animation-delay:1.35s;
-webkit-animation-delay:1.35s;
-moz-animation-delay:1.35s;
}
#frotateG_08{
left:15px;
bottom:15px;
animation-delay:1.5s;
-o-animation-delay:1.5s;
-ms-animation-delay:1.5s;
-webkit-animation-delay:1.5s;
-moz-animation-delay:1.5s;
}
@keyframes f_fadeG{
0%{
background-color:rgb(0,0,0);
}
100%{
background-color:rgb(255,255,255);
}
}
@-o-keyframes f_fadeG{
0%{
background-color:rgb(0,0,0);
}
100%{
background-color:rgb(255,255,255);
}
}
@-ms-keyframes f_fadeG{
0%{
background-color:rgb(0,0,0);
}
100%{
background-color:rgb(255,255,255);
}
}
@-webkit-keyframes f_fadeG{
0%{
background-color:rgb(0,0,0);
}
100%{
background-color:rgb(255,255,255);
}
}
@-moz-keyframes f_fadeG{
0%{
background-color:rgb(0,0,0);
}
100%{
background-color:rgb(255,255,255);
}
}
@-moz-document url-prefix(){ .centerSpinner{ color:red; top:500px; } }
.background{
background-color: rgba(0,0,0,.6);
}
.centerSpinner{top:35%;}
.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置于绝对位置（意味着你将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/
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？