Question

我在这个问题上的斗智尽头。在Chrome中，标尺厚度会根据下面的文本行数而变化。在Firefox和IE中它始终保持1px。下面的图片和这里的小提琴（访问Chrome以查看问题） https://jsfiddle.net/Lh4qg7zc/

<div class="project-card">
    <div class="project-caption">
        <div class="pc-name">beloved homes</div>
        <hr class="project-caption-ruler">
        <div class="pc-type">Book</div>
        <div class="pc-task">International editing, verbal identity, copy adaptation</div>
    </div>
</div>

<div class="project-card">    
    <div class="project-caption">
        <div class="pc-name">beloved homes</div>
        <hr class="project-caption-ruler">
        <div class="pc-type">Book</div>
        <div class="pc-task">International editing, verbal identity, copy adaptation ... and an extra line...</div>
    </div>
</div>

CSS：

.project-card {
    position: relative;
    background-color:brown;
    text-align: center;
    width: 380px;
    height: 250px;
    margin-bottom: 2%;
}

.project-caption {
    color: white;
    font-size: 0.8rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
}

.pc-name {
    text-transform: uppercase;
    padding-bottom: 5px;
}

.project-caption-ruler {
    width: 166px;
    border:0;
    border-top:1px solid white;
}

.pc-type,
.pc-task {
    font-style: italic;
}

.pc-task {
    margin-top: 3px;
}

Answer 1

我认为它与父容器的固定高度有关。我得到了解决方法：

＆＃13;

.project-card {
    position: relative;
    background-color:brown;
    text-align: center;
    width: 380px;
    height: 250px;
    margin-bottom: 2%;
}

.project-caption {
    color: white;
    font-size: 0.8rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
}

.pc-name {
    text-transform: uppercase;
    padding-bottom: 5px;
}

.project-caption-ruler {
    width: 166px;
    border: none;
    border-top:1px solid white;
}

.pc-type,
.pc-task {
    font-style: italic;
}

.pc-task {
    margin-top: 3px;
  line-height: 16px;
}

＆＃13;

<div class="project-card">
<div class="project-caption">
        <div class="pc-name">beloved homes</div>
        <hr class="project-caption-ruler">
        <div class="pc-type">Book</div>
        <div class="pc-task">International editing, verbal identity, copy adaptation</div>
    </div></div>
    
<div class="project-card">    
    <div class="project-caption">
        <div class="pc-name">beloved homes</div>
        <hr class="project-caption-ruler">
        <div class="pc-type">Book</div>
        <div class="pc-task">International editing, verbal identity, copy adaptation ... and an extra line...</div>
    </div></div>

＆＃13;

我只是在您的line-height: 16px;课程中添加了.pc-task。

更新了小提琴：https://jsfiddle.net/Lh4qg7zc/3/

编辑 - 确实与你父母的固定高度有关，因为我在下面的示例中删除了小提琴并使用了填充：https://jsfiddle.net/Lh4qg7zc/4/

如您所见，hr显示相同的内容。

为什么1px <hr />外观会发生变化？

1 个答案: