在浏览器之间正确地在独立div的顶部放置多个span

Question

我遇到了一个问题，在我的WordPress帖子中正确地将多个span放在几个div之上。

我在notepad++中创建了我自己的虚拟网页，所有的样式和东西，以确保它看起来像我想要的，它看起来很好。然而，当我把所有的HTML结构和CSS放到我的WordPress站点时，它看起来就不太对了。

HTML内容如下:

<div class="member-status">MEMBER
    <span class="level-dot">&bull;</span>
</div>
<br /><br />
<div class="silver-status">
    <span class="big-checkmark">&#10004;</span>SILVER<span class="level-dot">&bull;&bull;</span>
</div>
<br /><br />
<div class="gold-status">GOLD
    <span class="level-dot">&bull;&bull;&bull;</span>
</div>

支持它的CSS是这样的:

.member-status {
position:relative;
width:200px;
color:#fff;
display:block;
margin:0 auto;
border-radius:5px;
border:1px solid #5cadff;
text-align:center;
font-family: sans-serif;
font-weight: bold;
text-shadow: 0px 1px 1px #5cadff;
padding:20px 30px;
background:#1874cd;
background-image: -webkit-linear-gradient(#4f9eea, #1874cd);
background-image: -moz-linear-gradient(#4f9eea, #1874cd);
background-image: linear-gradient(#4f9eea, #1874cd);
-webkit-box-shadow: 10px 10px 5px #777;
-moz-box-shadow: 10px 10px 5px #777;
box-shadow: 10px 10px 5px #777;
}
.silver-status {
position:relative;
width:200px;
color:#555;
display:block;
margin:0 auto;
border-radius:5px;
border:1px solid #bbb;
text-align:center;
font-family: sans-serif;
font-weight: bold;
text-shadow: 0px 1px 1px #bbb;
padding:20px 30px;
background:#c0c0c0;
background-image: -webkit-linear-gradient(#eaeaea, #c0c0c0);
background-image: -moz-linear-gradient(#eaeaea, #c0c0c0);
background-image: linear-gradient(#eaeaea, #c0c0c0);
-webkit-box-shadow: 10px 10px 5px #777;
-moz-box-shadow: 10px 10px 5px #777;
box-shadow: 10px 10px 5px #777;
}
.gold-status {
position:relative;
width:200px;
color:#e68a00;
display:block;
margin:0 auto;
border-radius:5px;
border:1px solid #ffff80;
text-align:center;
font-family: sans-serif;
font-weight: bold;
text-shadow: 0px 1px 1px #ffff80;
padding:20px 30px;
background:#ffd700;
background-image: -webkit-linear-gradient(#fff2aa, #ffd700);
background-image: -moz-linear-gradient(#fff2aa, #ffd700);
background-image: linear-gradient(#fff2aa, #ffd700);
-webkit-box-shadow: 10px 10px 5px #777;
-moz-box-shadow: 10px 10px 5px #777;
box-shadow: 10px 10px 5px #777;
}
.big-checkmark {
position:absolute;
top:7px;
left:12px;
color:#3c3;
font-size:2.5em;
}
.level-dot {
position:absolute;
top:7px;
right:15px;
font-size:2.5em;
}

您可以在这里看到JSFiddle的最终结果:http://jsfiddle.net/WcQbL/1/

事情是这样的……在Chrome上，这对我来说是完美的。大复选标记和平点跨度看起来完美地放置在我想要的地方。

在Firefox和IE11中，平点看起来位置很好，但是在Firefox中，大复选标记的位置从中心向下，在IE11中稍微向下。我用同样的方式把两个跨度都往下推使用top:7px;

现在…我将同样的HTML结构插入到我在WordPress上的一个测试帖子中，并将所有适当的CSS添加到我的子主题的style.css文件中。

然而，当我进入帖子时，关卡点和大复选标记在所有3个div上都位于很高的位置，看起来真的很糟糕。

所以，我的问题是……有没有更好的方法把这些span放在div的上面让它们在所有浏览器中保持一致?在我的父样式。CSS中是否有一些CSS会影响到跨度在我将相同的代码插入到我的WordPress帖子中时的大小?

任何帮助都将非常感激。这是我第一次在div上使用span，所以如果CSS代码不是很好，我很抱歉。

还有一点，我最初是在"WordPress开发"堆栈交换上发布这篇文章的，但是他们让我来这里。我觉得这可能只是一个纯粹的标记问题，可以让它在所有浏览器上工作，包括我的Wordpress网站，但也许这是Wordpress特有的。

谢谢!

Answer 1

我找到了解决问题的方法。在旧代码中，我让div上的填充或多或少地为我"调整"div的大小，并给它我想要的外观。在旧代码中，我只指定了div的宽度，没有指定高度。

在修复中，我指定了自己的高度和宽度(宽度:275px和高度:70px)。然后，为了让文本或其他东西在div中正确居中，你应该指定"line-height"属性，所以我设置line-height:70px来匹配我的常规高度。然后，取出所有填充(padding:0)。

作为一个具体的例子，"member-status"类现在看起来是这样的:

.member-status {
    position:relative;
    height:70px;
    line-height:70px;
    width:275px;
    color:#fff;
    display:block;
    margin:0 auto;
    border-radius:5px;
    border:1px solid #5cadff;
    text-align:center;
    font-family: sans-serif;
    font-weight: bold;
    text-shadow: 0px 1px 1px #5cadff;
    padding: 0;
    background:#1874cd;
    background-image: -webkit-linear-gradient(#4f9eea, #1874cd);
    background-image: -moz-linear-gradient(#4f9eea, #1874cd);
    background-image: linear-gradient(#4f9eea, #1874cd);
    -webkit-box-shadow: 10px 10px 5px #777;
    -moz-box-shadow: 10px 10px 5px #777;
    box-shadow: 10px 10px 5px #777;
}

最后，我将"大勾号"one_answers"平点"设置在特定位置。我去掉了"top:7px"属性，因为现在我的修改使它向下推得太远了，但保留了"left"one_answers"right"属性，使它们与我想要的左右边界保持距离。

你可以看到新的代码在:new fixed way

和旧代码:old wrong way

如果你看看所有不同浏览器中的新代码，它现在看起来完全一样，正是我想要的——每个浏览器之间没有差异。

希望这能帮助到一些人!