0

我正在尝试用一个漂亮的纹理线伪元素制作一个把手元素，该元素水平和垂直居中在它的中间。

我知道很多人用背景图像做这种效果，但我希望它是矢量，这样它即使在高密度显示器上也能工作。

演示：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;
}

这是第二个演示，它在更大的层面上展示了基本效果。它只有对齐的 inline-block 元素，然后是居中的 inline-block 元素。

想要的效果应该是这样的： 在此处输入图像描述

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

这到底是怎么回事？

4

1 回答 1

1

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

我从CSS-Tricks 上的Fighting the Space between Inline Block Elements中得到了诀窍。

于 2013-06-26T23:33:13.163 回答