0

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

我可以创建“回复”按钮，但我在使用附加选项按钮时遇到问题：我似乎无法始终如一地获得我想要使用的图像以多个浏览器为中心。例如，Firefox 将图像向下移动，而 chrome 将图像向上移动。（我在下图中添加了红线以显示间距不一致）

链接以显示问题：

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

我知道我对这个像素偏斜很挑剔，但问题似乎变得更糟，具体取决于我使用的行高，并且确实导致它看起来很糟。任何帮助将不胜感激。谢谢！！

<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;
}
4

1 回答 1

0

您可以使用各种可用方法为不同的浏览器使用不同的样式/样式表，也可以设置一个高度，然后使用position: absolute. 我发现大多数时候，position: absolute;在许多浏览器中修复问题都做得很好。例如

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

这会将图像向下移动 10 像素，向右移动 100 像素（相对于不是最近的父元素 position: fixed;

于 2012-09-12T03:37:51.970 回答