Html IE7中跨对齐的CSS_Html_Css_Internet Explorer 7

Html IE7中跨对齐的CSS

html css

Html IE7中跨对齐的CSS,html,css,internet-explorer-7,Html,Css,Internet Explorer 7,我有以下情况：编辑：删除链接在IE7中，我给出了不同的观点——这三个元素不是顶部对齐的。在其他浏览器中，代码看起来不错请建议如何调整这三个要素 HTML代码： <html> <head> <title> Text </title> <link href="/css/style.css" rel="stylesheet" type="text/css" /> </head> <body>

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

在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>

您需要将

top:0

添加到

。左按钮

和

。右按钮

，因为它们有

位置：绝对位置，IE7有缺陷
请参阅：我无法显示您提供的链接。花太多时间。编辑：也许提供一个JSFIDLE并在这里粘贴最小的代码？你应该在你的问题中发布一个代码，这样其他人在你修复你的站点后可以得到帮助。另外，您可以发布相同的代码，这样我们就可以看到问题的工作示例。已编辑、已删除的链接也将在JSFIDLE中尝试-但它在IE7中工作吗？您真的没有doctype吗？如果是这样，我希望所有版本的IE包括IE7/8/9都以相同的方式呈现页面：断开（怪癖模式）。在IE7中，没有显示正确对齐的三个元素
.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;
}