html - IE7中跨度对齐的CSS

This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center。




                                7年前关闭。


我有以下情况：
编辑：删除链接

在IE7中，我给出了不同的看法-这三个元素不是顶部对齐的。
在其他浏览器中，代码看起来还可以。

请提出如何将这三个要素对齐？

HTML代码：

<html>
 <head>
  <title> Text </title>
  <link href="/css/style.css" rel="stylesheet" type="text/css" />
 </head>

 <body>
  <div class="button-like">
    <a href="">
        <span class="left-button"></span>
        <span class="right-button"></span>
        Text text text
    </a>
</div>
 </body>
</html>

CSS代码：

.button-like{
margin: 0 0 20px 0;
/* Elipsis */
    white-space: nowrap;
    width: 100%; /*IE 6*/
    overflow: hidden;
    text-overflow: ellipsis;}

.button-like a{
    max-width: 410px;
margin-left: 35px;
margin-right: 35px;
padding: 0 40px;
position: relative;
height: 38px;
color: #52455f;
text-decoration: none;
line-height: 40px;
display: inline-block;
background: url("/imgs/button-tile.png") 0 0 repeat-x transparent;
}

.left-button{
left: -35px;
position: absolute;
width: 35px;
height: 38px;
background: url("/imgs/button-left.png") 0 0 no-repeat transparent;
}

.right-button{
left: auto;
right: -35px;
position: absolute;
width: 35px;
height: 38px;
background: url("/imgs/button-right.png") 0 0 no-repeat transparent;
}

最佳答案

您需要将top: 0添加到.left-button和.right-button，因为它们具有position: absolute，并且IE7有错误。

参见：http://jsfiddle.net/thirtydot/JVZ6K/5/

关于html - IE7中跨度对齐的CSS，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/11120581/