私のプロジェクトでは、ブートストラップとそれ以下を使用しています。テンプレートをテストするときれいに見えますが、ieTest を使用してテストすると、何か問題があることがわかりました。
写真は、上から順に Chrome 22、IE9、IE6 です。
「3ピクセルのジョグ」など、見つけられるものはすべて見つけましたが、まだ解決できません。
ここにhtmlコードがあります:
<p class="top-tag">
<span class="floatbutton">
<a href="" class="clear left-button"><</a>
<a href="" class="right-button clear">></a>
</span>
<a href="" class="down">down</a>
<a href="" class="ask-detail">ask phone</a>
<a href="" class="bytime">time</a> /
<a href="" class="passrate">rate</a>
<b>1,10</b>
</p>
ここにCSSがあります:
p.top-tag {
margin-top: 25px;
font-size: 12px;
width: 100%;
a.down, a.ask-detail {
display: inline-block;
height: 25px;
text-align: center;
line-height: 25px;
border: 1px solid #dddddd;
color: #2f2725;
}
a.down { width: 44px;}
a.ask-detail {
width: 90px;
margin: 0 43px auto 20px;
}
b {
margin-left: 284px;
display: inline-block;
}
span.floatbutton {
float: right;
width: 39px;
//display: inline-block;
overflow: auto;
zoom: 1;
//for the IE6
//---
//_overflow: hidden; zoom: 1;
//---
height: 25px;
margin: 4px -3px auto 0;
a {
display: inline-block;
vertical-align: top;
width: 13px;
height: 13px;
border: 1px solid #ddd;
padding-left: 4px;
padding-bottom: 4px;
}
a.left-button {
float: left;
display: inline;
border-right-style: none;
*margin-top: 1px;
}
}
}
テンプレートの先頭でbootstrap.css
andを使用します。css.less
問題は、IE の下のピクセルが機能しない理由です。そしてIE6は表示できず、遠くに浮かんでいます。
ありがとう!