Question

看看下面的代码，这是我遇到的更大问题的简化版本：

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
        div {border-width:0px 5px; border-style:solid; border-color:black; width:400px; margin:0; padding:0; background:red;}
        div:nth-child(2) {background:green;}
        p {color:yellow; text-transform:uppercase; font-size:40px;margin:0;padding:0;}
</style>
</head>
<body>
<div><p>Hello World</p></div>
<div><p>Hello World</p></div>
</body>
</html>

它应该创建这样的东西：

enter image description here

客户要求的是黑色左边框和黑色右边框与黄色文字的高度完全相同。也就是说，黑条的高度不应包括黄色文本的顶部+底部和容器的顶部+底部之间的额外空间。

我能想到的一种方法是在包含div上设置一个固定的高度，然后给div一个溢出：隐藏。接下来，我将在p标签上使用负边距顶部。

有人能想到更好的方法吗？我真的不喜欢我提到的方法，因为我的客户端是一个设计纳粹，并期望在所有不同的操作系统，不同的浏览器和不同的屏幕分辨率下，事物像素完美。根据我的经验，如果我尝试通过将像素值硬编码到我的CSS中来定位元素，并且这些元素仍然需要相对于大小不同的元素（由于动态内容），它可能是一个夜晚的母马。

我的担忧是否合理？如果是这样，是否有更好的方法使边框与文本完全相同？

Answer 1

你可以使用伪元素做这样的事情（没有＆lt; = IE8支持）。请注意，边框略大于字体，这只是字体的性质，允许在上方和下方留出一点空间（注意两者都设置为40px）。这不能真正帮助跨平台/浏览器/等。除非你想制作像素完美的图像。

jsFiddle

enter image description here

<强> HTML

<div><p class="fancy-border">Hello World</p></div>

<强> CSS

.fancy-border {
    position:relative;
}
.fancy-border:before {
    content:"";
    display:block;
    z-index:-1;
    position:absolute;
    height:40px;
    width:100%;
    border-width:0px 5px;
    border-style:solid;
    border-color:black;
    top:50%;
    margin-top:-20px;
    left:-5px;
}

Answer 2

这就是你要找的东西：

jsFiddle

只需将行高设置在容器高度以下，这样字体就可以占用它，而不会留下任何空间。

p{    
font-size:40px;
line-height:30px;
}

Answer 3

在P标签上给出边框并设置p的行高，这样在行之间没有空格，然后在它们之间给出边距

CSS - 使左+右边框与文本的高度完全相同

3 个答案: