次のケースがあります: 編集済み: リンクを削除しました
IE7 では、別のビューが表示されます。3 つの要素が上に配置されていません。他のブラウザでは、コードは正常に見えます。
3 つの要素の配置をどうするかを提案してください。
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;
}