Question

我正在尝试在我的网站上创建一个“回复”按钮，该按钮旁边会有一个下拉框，用于指定其他选项。有点像这样：[回复] [v]

我能够创建“回复”按钮确定但是我遇到了附加选项按钮的问题：我似乎无法得到我希望用它的图像始终集中在多个浏览器中。例如，firefox将图像向下移动，而chrome将图像向上移动。（我在下图中添加了红线以显示间距不一致）

Link显示问题：

有没有人知道如何在跨度内正确地垂直居中（水平它工作正常！）或者有另外一个关于如何制作我的按钮的建议？同样重要的是“箭头”按钮与“回复”按钮（至少是它们的外边框）具有相同的高度，因为我尝试过的一些解决方案导致“破坏”。我还想将箭头按钮图像保留为元素的“背景”属性的一部分，以便可以从包含多个图像的png中选择它。（出于效率原因，所有网站上的所有图标都只加载了一张图片）

我知道我对这一个像素的偏斜听起来很挑剔，但问题似乎变得更糟，这取决于线高I使用并且真的让它看起来很糟糕。任何帮助将不胜感激。谢谢!!

<div>
    <a href="#" class="link1"><span class="text">Reply</span></a><a href="#" class="link2"><span class="options"></span></a>
</div>

.link1{
    display: inline-block;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    border: 1px solid black;
    color: black;
    text-decoration: none;
    font-size: 12px;
    line-height: 20px;
}

.link2{
    display: inline-block;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    border: 1px solid black;
    border-left: none;
    color: black;
    text-decoration: none;
    font-size: 12px;
    line-height: 20px;
}

.text{
    margin: 0px 5px 0px 5px;
    padding: 0px 0px 0px 0px;
    font-size: 12px;
}

.options{
    margin: 0px 0px 0px 0px;
    padding: 0px 5px 0px 12px;
    background-image: url("arrow.png");
    background-position: 2px 3px;
    background-repeat: no-repeat;
    overflow: hidden;
}

Answer 1

您可以使用各种可用方法为不同的浏览器使用不同的样式/样式表，也可以设置一个高度，并使用position: absolute。我发现大多数时候，position: absolute;在很多浏览器中都能很好地解决问题。例如

position: absolute;
top: 10px;
left: 100px;

这会将图像向下移动10个像素，向右移动100px（相对于不 position: fixed;

的最近父元素

如何在多个浏览器中使图像与文本垂直对齐？

1 个答案: