2

これは、'em' 測定で完全な Web ページ レイアウトを作成する最初の試みです。ライブ プレビュー マークダウン エディターを構築しています。

このページは Firefox と chrome で完全に動作しますが、IE (私は IE9 を持っています) と Opera (昨夜更新) では、テキスト領域が境界線を大きく引き離します。Opera では、テキストエリアの境界線も角が丸くなっていません。（テキスト領域は角が丸くなっていますが、境界線は表示されていません）

テキストエリアのCSSです

#pad {
    background-color:#BBBB99;
    background-image:url("../img/edit.png");
    border-color:rgba(32, 32, 52, 0.39);
    border-radius:1em 1em 1em 1em;
    font-size:1.3em;
    height:33.3em;
    margin:0.3em;
    outline:medium none;
    padding:0.9em 0.7em;
    resize:none;
    width:26em;
    text-align: left;

}

これはhtmlスニペットです

<div class='container'>
  <div id='left'>
    <textarea id = 'pad' wrap="on" ></textarea>
  </div>

  <div id='right'>
    <div id='preview'></div>
  </div>
</div>

本文に「フォント: 100%」を設定しました。 確認する必要がある場合は、デモのリンクを次に示します。

4

2 に答える 2

4

でのフォントサイズの変更が原因だと思います#pad。

18px などのベース フォント サイズを設定すると、すべての子要素が として扱わ1emれ18pxます。ただし、子のいずれかの font-size を 1.2em に変更すると、その子内にネストされたすべての子要素が次のように扱わ1emれ始め22pxます。

body {
    font-size: 18px;
}

.parent {
    font-size: 1em;   /* 18px */
}

.child {
    font-size: 1.2em  /* 22px */
}

.child > .child {
    font-size: 1em;   /* 22px */
}

Internet Explorer で起こっていると思うのは、 ofが計算される1.2em前にfont-size が変更されているということです。したがって、Firefox と Chromeの幅は です。IE の幅はです。width#pad26 * 18px26 * 22px

これを回避するには、幅を固定em値ではなくパーセンテージで設定します。

編集

Opera の丸みを帯びた角の問題に関して; border-widthOpera はどちらも設定されていないという事実を快く思わないようborder-styleです。

に変更border-colorしてみborder: 1px solid rgba(32, 32, 52, 0.39);て、問題が解決するかどうかを確認してください。

于 2012-06-23T20:05:53.253 に答える
0

特別な css3 機能については、各ブラウザのベンダー プレフィックスを使用します:
の代わりにborder-radius:1em 1em 1em 1em;: 

-webkit-border-radius:1em;
-moz-border-radius:1em;
-o-border-radius:1em;
-ms-border-radius:1em;
border-radius:1em;
于 2012-06-23T18:36:22.170 に答える