CSS - 使左+右边界完全一样的高度，文字

看看下面的代码，这是我有一个更大的问题的一个简化版本：CSS - 使左+右边界完全一样的高度，文字

<!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中来定位元素，并且这些元素仍然需要相对于大小不同的元素（由于动态内容），它可以是夜晚的母马。

我的担忧是否值得？如果是这样，是否有更好的方法使边界与文本高度完全一样？

来源

2013-03-24 John

你可以用伪元素来做这样的事情（没有< =支持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; 
}

来源

2013-03-24 05:02:21

嘿Tyriar，你可能已经注意到了，我不希望“字体允许一小部分空间在上面和下面“。那么你是说我的两个选择是使用图像还是采用我在问题中提到的方法？我认为这两者都是不可维护的做事方式。即使客户要求它 – John 2013-03-24 14:20:49

也许一个不同的字体将精确绘制。我同意他们是不好的和不可修复的解决方案，但这就是字体的工作方式，因为您可以看到我们的绘图尺寸完全相同。 – 2013-03-24 20:49:57

我需要在某些文本前面绘制一个状态栏，并且此解决方案完美运行。谢谢！ – Bill 2013-11-15 18:37:34

这是你是什么寻找：

jsFiddle

只需设置容器的高度低于行高度，使得字体占用其财产，不得高估留下空间。

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

来源

2013-03-24 14:42:14 bukka

差不多。我将行高改为27px。文字顶部之间的空白消失了。但是在文本底部有空格。如果我再减少行高，文本的顶部开始溢出。我不希望文本溢出或裁剪。 – John 2013-03-24 14:47:47

将'line-height'设置为'26px'并添加'padding-top'的'2px'。这应该恰到好处。我用这段代码更新了上面的jsFiddle。 – bukka 2013-03-24 15:01:57

您是否知道这是否能在所有浏览器，操作系统，桌面与移动设备以及屏幕分辨率上呈现完美像素？一旦我回到办公室，我会做一些测试。因为我在过去注意到，有时候当你尝试通过像素完全对齐某些东西时，它可能会关闭，具体取决于您的环境，最终会看到差距。 – John 2013-03-24 15:25:24

给出p标签的边界，并设置p的行高度，而且还残留线之间没有空格，则它们之间给保证金

来源

2014-07-31 07:52:57 Dennis

CSS - 使左+右边界完全一样的高度，文字

回答

相关问题