html - 在浏览器之间正确地将多个跨度定位在单独的 div 之上

Question

我在将多个跨度正确放置在我的 WordPress 帖子中的几个 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 之上，以便它在所有浏览器中保持一致？一旦我将完全相同的代码插入到我的 WordPress 帖子中，我的父 style.css 中是否可能有一些 CSS 会影响跨度上升？

如有任何帮助，我们将不胜感激。这是我第一次在 div 之上使用 span，所以如果 CSS 代码不是很好，我深表歉意。

另外请注意，我最初将其发布在“WordPress 开发”Stack Exchange 上，但他们让我来这里。我觉得这可能只是一个标记问题，可以让它在包括我的 Wordpress 站点在内的所有浏览器上运行，但也许它是 WordPress 特定的。

谢谢!

Answer 1

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

在修复中，我指定了自己的高度和宽度(宽度:275 像素和高度:70 像素)。然后，为了让文本或其他内容在 div 中正确居中，您还应该指定“line-height”属性，所以我设置 line-height:70px 以匹配我的常规高度。然后，取出所有填充(填充: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;
}

最后，我强制“大复选标记”和“水平点”处于特定位置。我去掉了“top:7px”属性，因为随着我的改变，它现在被推得太远了，但是在那里留下了“left”和“right”属性，让它们与我想要的左右边界隔开他们。

您可以在以下位置查看新代码:New fixed way

旧代码位于:Old wrong way

如果您在所有不同的浏览器中查看新代码，它现在看起来完全一样并且完全符合我的要求——每个浏览器之间没有区别。

希望这对某人有帮助!