em不能在IE和Opera中工作的文本区

Question

这是我第一次尝试在'em'测量中做一个完整的网页布局。我正在建立一个实时预览减价编辑器。

这个页面在Firefox和chrome中运行得很好，但是在IE（我有IE9)和Opera（昨晚更新）中，文本区的边界明显地被拍了出来。在Opera中，textarea的边框也没有呈现圆角。（文本区域显示圆角但不显示边框）

这是textarea的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>

我在正文中设置了'font:100%'。这里是演示的链接，如果你需要检查。

Answer 1

我认为这个问题是由于#pad中字体大小的变化引起的。

当设置基本字体大小（例如18px)时，所有子元素都将1em视为18px。但是，如果将其中一个子项中的字体大小更改为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中发生的情况是，在计算#pad的width之前，字体大小被更改为1.2em。因此Firefox和Chrome的宽度是26*18px，而IE中的宽度是26*22px。

为了解决这个问题，我将宽度设置为百分比，而不是固定的em度量值。

编辑

关于歌剧中的圆角问题；似乎Opera并没有考虑到既没有设置边框宽度也没有设置边框样式这一事实。

尝试将border-color更改为border:1px固体rgba(32,32,52,0.39）；，看看这是否解决了您的问题。