0

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

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

1 回答 1

1

你需要添加top: 0,因为他们有.left-button而且IE7 是错误的。.right-buttonposition: absolute

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

于 2012-06-20T13:58:13.763 回答