2

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

<!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>

它应该创建如下内容：

在此处输入图像描述

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

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

谁能想到更好的方法？我真的不喜欢我提到的这种方法，因为我的客户是一个设计纳粹，并且希望在所有不同的操作系统、不同的浏览器和不同的屏幕分辨率上都能做到像素完美。根据我的经验，如果我尝试通过将像素值硬编码到我的 CSS 中来定位元素，并且这些元素仍然需要与大小不同的元素相关（由于动态内容），那可能是一场噩梦。

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

4

3 回答 3

2

这是你想要的：

jsFiddle

只需将 line-height 设置为低于容器的高度，以便字体占据它而没有任何剩余空间。

p{    
font-size:40px;
line-height:30px;
}
于 2013-03-24T14:42:14.240 回答
1

您可以使用伪元素（不支持 <= IE8）来执行类似的操作。请注意，边框比字体大一点，这只是字体的性质，允许上下有一点空间（请注意，两者都设置为40px）。这不能真正帮助跨平台/浏览器/等。除非您想制作像素完美的图像。

jsFiddle

在此处输入图像描述

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;
}
于 2013-03-24T05:02:21.317 回答
0

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

于 2014-07-31T07:52:57.080 回答