内联块伪元素强制大小和挤出主元素

Question

我正在尝试制作一个带有漂亮纹理线伪元素的句柄栏元素，该元素在其中间水平和垂直居中。

我知道有很多人用背景图像来做这个效果，但我希望它是矢量，这样它甚至可以在高密度显示器上工作。

演示：jsFiddle

整个事情只使用一个元素并使用这个CSS：

html, body
{
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

*
{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.header_handle
{
    width: 100%;
    height: 7px;
    position: relative;

    background: #9e978b;

    border-top: 1px solid #b8b1a5;
    border-bottom: 1px solid #827c72;

    text-align: center;
    cursor: s-resize;
}

.header_handle:before
{
    content: '';

    display: -moz-inline-stack;
    display: inline-block;
    vertical-align: middle;
    zoom: 1;
    *display: inline;

    background: #ff0000;
    width: 10px;

    height: 100%;
}

.header_handle:after
{
    content: '';

    display: -moz-inline-stack;
    display: inline-block;
    vertical-align: middle;
    zoom: 1;
    *display: inline;

    width: 42px;
    height: 1px;

    background: #ada599;
    outline: 1px solid #ada599;

    border-top: 1px solid #6b665e;
    border-bottom: 1px solid #6b665e;
}

这是second demo，它显示了更大级别的基本效果。它只是对齐内联块元素，然后是居中的内联块元素。

所需效果应如下所示：

上面的第一个演示工作在高于22px的高度，如果你关闭高度属性，它会扩展到22px所以它似乎认为伪元素是22px或类似的东西。

这到底是怎么回事？

Answer 1

将font-size: 0;添加到主要元素.header_handle。这消除了内联元素之间的任何空间。

我从Fighting the Space Between Inline Block Elements获得了关于CSS-Tricks的技巧。