0

さまざまなブラウザのCSSスタイルに問題があります。私はそれがオペラだけに関係していると思います（この問題はオペラだけで見つかり、オペラ、Firefox、クロームでテストされました）。だから私はページがあり、そこには順序付けられていないリストがあり、すべてのリストの箇条書きは異なる画像です（ただし同じサイズです）。すべてのli要素で画像とテキストを揃えました。そのテキストは中央にあります（水平方向に画像で）。すべてのliには、1行または2行のテキストがあります。2行のテキストを含むliがある場合、上部のパディングを使用する必要はなく、下部のパディングだけを使用します。1行のテキストliがある場合、テキストを適切に配置するために、上部と下部の両方のパディングを使用します。

オペラでは問題ないように見えましたが、chromeとfirefoxを開くと、一部のliテキストが2行になり、オペラの同じliテキストが1行になりました。オペラの問題は、ズームするビューの量に応じてテキストの間隔が変わることです。chromeとfirefoxはどちらも、テキストの間隔を変更しません。ズームするページの量は関係ありません。

より明確にするために、ズームの程度に応じてオペラでどのように見えるかの例を次に示します。 オペラビュー

unordedリストに使用される私のcssスタイル：

li.top{
padding-top:9px;
}
li.bottom0{
padding-bottom:6px;
}
li.bottom {
    padding-bottom: 13px;
}
    li.bottom2{
padding-bottom:15px;
}

.li-meetings {
    list-style-type: none;
    background:url(wp-content/uploads/2012/07/calendar.gif) no-repeat;
    padding-left: 50px;
} //all li element styles are the same, just differs uploaded image

したがって、問題は、liのテキスト行の量に応じてcssスタイルを変更する（そしてズームインおよびズームアウトするときに動的に変更する）方法があるということです。それとももっと簡単な方法がありますか？

4

1 に答える 1

0

テキストボックスのサイズに依存しないでください。次のような一般的なソリューションを使用してみてください：http：//jsfiddle.net/jhmVf/3/

于 2012-08-09T15:14:42.783 に答える