0

前もってお詫びします... 私はCSSの専門家ではありません。ボタンの横に円を描いているところに問題があります。円は IE では正しく表示されますが、Firefox では高すぎます。

次の css クラスが定義されています。

.circle {
    width:1.2em;
    height:1.2em;
    border-radius:50%;
    font-size:2em;
    color:#fff;
    line-height:1.2em; /* must match the height */
    text-align:center;
    background:#2b5f77;

    font-family: "Times New Roman";
    text-align: center;
    vertical-align: middle;
    font-style: italic;
    font-weight: bold;
    position: absolute;
    top:239px;
    left: 340px;
    border-style: solid;
    border-width: 1px;
}

.circle:hover {
   border-top-color: #28597a;
   background: #28597a;
   color:#ec9226;
   }
.circle:active {
   border-top-color: #1b435e;
   background: #4d8eAE;

 }

次に、円をレンダリングするコード:

<div class="circle" value="i">i</div>

このコードを変更して、すべてのブラウザで円が同じ場所に表示されるようにするにはどうすればよいですか?

編集1

IE 9 標準モードでテストしています。重要な場合は、開始の html タグは次のようになります。

<!DOCTYPE HTML>
<html lang="en">

ありがとう。

4

2 に答える 2

2

私のテストでは、.circlecss のこれらのルールを削除すると、

.circle {
    position: absolute;
    top:239px;
    left: 340px;
    }

そしてそれらを

.circle {
    position: relative;
    margin: 239px 0px 0px 340px;
    }

、目的の結果が得られます。Internet Explorer (9&10)、Google Chrome & FF でテストおよび比較。

これの正確な原因はわかりませんが、ブラウザー固有の本文と html のパディング/マージンが小さな役割を果たしています。

于 2013-05-21T00:29:34.450 に答える