Question

我正在网站上工作，客户希望完全该模型。问题是，标题和我在背景中使用的其他一些div给了我一些问题。根据我的经验，这是第一次不是浏览器特定的问题。

这就是我姐姐的样子（我让她给我发送另一台电脑的截图......）我看到了：

但是，在我办公室的每台Mac，每台移动设备和PC上，我都是这样看的：

正如您所看到的，只有在某些Windows PC中，文本顶部还有额外的填充。如果我摆脱标题的填充顶部，它会回到＆＃34;正常＆＃34;，只有一对像素更薄。

这里是标题的html：

<div class="contentHeader"><b><div class="square"><!--&#9724;-->&nbsp;</div>IN PROMOTION</b></div>

而且，这是html那部分的CSS：

.contentHeader{
    line-height: 38px;
    padding-top: 6.5px;
    padding-left: 11px;
    background-color: white;
    /*padding: 3px 8px;*/ /*In fact, if I uncomment this line, I'll see it centered, but not in the other ones...*/
    font-size: 20px; 
    letter-spacing: 1px;
}

.square{
    font-size:20px; 
    background-color: black;
    line-height: 15px; 
    min-height: 19px;
    min-width: 19px;
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
    margin-left: 1px;
    margin-bottom: 2px;
    font-family: "Arial";
}

我对任何解决方案都持开放态度......我已经在这个网站上使用了jQuery来做一些事情，所以如果真的有效的话可能会有一些修复。

我确保缓存不是问题。我在Chrome，Firefox和Edge的PC上测试过它...到处都是一样的。正如我所说，我只在我的电脑和姐姐身上看到过。我们俩都使用Windows 10，而在我的办公室里我也使用Windows 10。有关事业的任何想法吗？

Answer 1

首先，请勿使用<b>。如果您要加粗文字，请在CSS中使用font-weight:bold。
将块级元素放入内联元素（<div>中的<b>）会导致意外定位。这可能是造成这种情况的原因，但我们无法肯定地说出来。
不要为了定位目的而改变line-height。这仅用于文本间距。
最后，将文本包围在<span>中并在其上使用display:inline-block（因此它服从垂直填充）。这样，您可以使用填充来定位正方形和文本，并将其定位到font-weight:bold。

尝试这样做，只需使用填充和尺寸即可。

<div class="contentHeader">
  <div class="square"></div>
  <span class="promotion-text">IN PROMOTION</span>
</div>

Answer 2

你的上衣有衬垫，你的下蹲不是。我用相同的填充物制作了两个：

＆＃13;

.contentHeader{
    height: 38px;
    line-height: 38px;
    padding-left: 11px;
    font-size: 20px; 
    letter-spacing: 1px;
    background: skyblue;
    padding-top: 10px;
    padding-bottom: 10px;
}

.square{
    font-size:19px;
    background-color: black;
    line-height: 19px; 
    min-height: 19px;
    min-width: 19px;
    display: inline-block;
    vertical-align: text-bottom;
    margin-right: 5px;
    margin-left: 1px;
    margin-bottom: 2px;
}

＆＃13;

<div class="contentHeader"><b><div class="square"><!--&#9724;-->&nbsp;</div>IN PROMOTION</b></div>

＆＃13;

Answer 3

投入一些javascript代码来阅读信息，并将其放在最底层或其他类似的内容中。它可能会详细说明是什么推动了什么。

chrome / firefox都内置或第三方应用程序安装到＆＃34;右键单击＆＃34;并选择检查。你可能会找到一些东西，某些地方在＆＃34; dom＆＃34;树。

================= 老实说，不确定你在说什么...你链接到的图像。都显示＆＃34;滚动＆＃34;左/右和上/下或至少是它的样子。很有可能你出去过去＆＃34;宽度＆＃34;和/或＆＃34;身高＆＃34;屏幕和导致滚动条发生每个说。

仅在一些PC中出现奇怪的错位

3 个答案: