logo标签列表

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

css
3

请看以下代码，这是一个我遇到问题的简化版本:

<!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上使用overflow:hidden。接下来，在p标记上使用负margin-top。 有人能想出更好的方法吗？ 我真的不喜欢我提到的方法，因为我的客户是一个设计纳粹，他希望所有不同操作系统，不同浏览器和不同屏幕分辨率的东西都是完美的像素对齐。 从我的经验来看，如果我尝试通过将像素值硬编码到我的CSS中来定位元素，并且那些元素仍然需要相对于由于动态内容而变化大小的元素（可能会很棘手）。 我的担忧是否有道理？ 如果是这样，请问有更好的方法使边框与文本完全相同的高度吗？
3个回答
阿里云服务器只需要99元/年，新老用户同享，点击查看详情
3

这是您要找的内容吗：

jsFiddle

只需要将行高设置为容器高度以下，这样字体就可以占用整个容器而不会留下任何空余的空间。

p{    
font-size:40px;
line-height:30px;
}
几乎了。我将行高改为27像素。文字顶部的间距已经消失了。但是文字底部还有空白。如果我再减小行高，文字顶部就会开始溢出。我不想让文字溢出或裁剪。 - John
将 line-height 设为 26px，并添加 2px 的 padding-top。这样应该刚好合适。我已经使用此代码更新了上面的 jsFiddle。 - bukka
你知道这个在所有浏览器，操作系统，桌面和移动设备以及不同的屏幕分辨率下是否能完美呈现像素？等我回到办公室后会进行一些测试。因为我之前注意到有时候如果你尝试通过像素绝对对齐东西，根据你的环境可能会有所偏差，最终出现间隙。 - John
好的，我已经将单位转换为“em”，并在最新版本的Chrome、Firefox和IE上进行了测试。所有都似乎工作正常。我甚至尝试了不同的分辨率，也没有出现任何问题。请务必进行测试，因为我相信肯定会有一些平台无法正常工作，这就是编码的本质。如果您真的想要像素完美的结果，请使用图像。我只能说，这是我用代码能够做到的最接近的效果：http://jsfiddle.net/Jm5Dw/6/ - bukka
1
你可以使用伪元素来实现这样的效果（不支持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;
}
嗨，Tyriar，你可能已经注意到了，我不想要“字体上下留有一点空间”。那么你是说我的两个选择是使用图像还是采用我在问题中提到的方法？我认为这两种方式都不可维护。即使客户要求这样做。 - John
1
也许使用不同的字体会有所改善。我同意它们都是糟糕且难以维护的解决方案，但这就是字体的工作方式，正如您所看到的，我们正在以完全相同的大小绘制它们。 - Daniel Imms
我需要在一些文本前面绘制一个状态栏，这个解决方案完美地解决了我的问题。谢谢！ - Bill
0

给P标签加边框，设置P的行高，使得行与行之间没有空隙，然后在它们之间留出边距

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，