Question

我在网站this screen shot中找到了zhihu这些按钮。

当我尝试制作这些按钮的版本时，我的版本就像this screen shot。

css行高不能对没有文本的按钮产生任何影响，但行高对于文本中的按钮很有用。这很奇怪。这两个按钮都在svg标签内。

我的HTML代码：

<body>
<div class="RichContent is-collapsed">
    <div class="ContentItem-actions">
        <span>
            <button class="Button VoteButton VoteButton--down" aria-label="反对"
                type="button">
                <svg viewBox="0 0 20 18"
                    class="Icon VoteButton-downIcon Icon--triangle" width="9"
                    height="16" aria-hidden="true" style="height: 16px; width: 9px;">
                <title>a</title>
                <g> <path
                    d="M0 15.243c0-.326.088-.533.236-.896l7.98-13.204C8.57.57 9.086 0 10 0s1.43.57 1.784 1.143l7.98 13.204c.15.363.236.57.236.896 0 1.386-.875 1.9-1.955 1.9H1.955c-1.08 0-1.955-.517-1.955-1.9z"></path></g></svg>

            </button>
            <button class="Button VoteButton VoteButton--down" aria-label="反对"
                type="button">
                <svg viewBox="0 0 20 18"
                    class="Icon VoteButton-downIcon Icon--triangle" width="9"
                    height="16" aria-hidden="true" style="height: 16px; width: 9px;">
                <title></title>
                <g> <path
                    d="M0 15.243c0-.326.088-.533.236-.896l7.98-13.204C8.57.57 9.086 0 10 0s1.43.57 1.784 1.143l7.98 13.204c.15.363.236.57.236.896 0 1.386-.875 1.9-1.955 1.9H1.955c-1.08 0-1.955-.517-1.955-1.9z"></path></g></svg>
                59
            </button>
        </span>
    </div>
</div>

我的css代码：

<style type="text/css">
button {
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    background: none;
    border: none;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.Button {
    display: inline-block;
    padding: 0 16px;
    font-size: 14px;
    line-height: 32px;
    color: #8590a6;
    text-align: center;
    cursor: pointer;
    background: none;
    border: 1px solid;
    border-radius: 3px;
    white-space-collapsing: discard;
}

.VoteButton {
    padding: 0 10px;
    color: #0084ff;
    background: rgba(0, 132, 255, .1);
    border-color: transparent;
}

.VoteButton--down {
    margin-left: 4px;
}

.Icon {
    vertical-align: text-bottom;
    fill: currentColor;
}

.VoteButton-downIcon, .VoteButton-upIcon {
    fill: currentColor;
}

.VoteButton-downIcon {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

.ContentItem-actions {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 10px 20px;
    margin: 0 -20px -10px;
    color: #646464;
    background: #fff;
    clear: both;
}

.RichContent {
    line-height: 1.67;
}

“line-height：32px;”不能工作！

Answer 1

您的HTML代码中没有任何名为

的

'Content-Type: application/x-www-form-urlencoded'

按钮

我认为css代码可能如下所示：

div

希望这有帮助。

最好的问候，乔。

Answer 2

我是这个问题的最佳人选。

最后，我找到了解决方案。感谢Lucas和Joe的帮助。

当网页的<!DOCTYPE>声明适用于像<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">这样的HTML4时，css＆＃34; line-height＆＃34;不适用于只有svg内容但没有任何文字内容的按钮。

但是，如果我们将<!DOCTYPE>声明格式的HTML4版本更改为HTML5版本，例如<!DOCTYPE html>，那么＆＃34;行高＆＃34;适用于两个按钮，无论按钮是否包含文本内容。

是的，声明的HTML5版本就像<!DOCTYPE html>一样，它非常简洁。但显然，它不适合旧的浏览器。

在svg中设置按钮的行高时没有效果

2 个答案: