css - 带有 em 的文本区域在 IE 和 Opera 中不起作用

Question

这是我第一次尝试以“em”尺寸制作完整的网页布局。我正在构建一个实时预览 markdown 编辑器。

此页面在 Firefox 和 chrome 中完美运行，但在 IE(我有 IE9)和 Opera(昨晚更新)中文本区域显着射击边界。在 Opera 中，textarea 的边框也不显示圆 Angular 。 (文本区域显示圆 Angular 但不显示边框)

这是文本区域的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%”。 Here is the link of demo if you need to check it.

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 中的圆 Angular 问题；似乎 Opera 对 border-width 和 border-style 都没有设置的事实并不友好。

尝试将 border-color 更改为 border: 1px solid rgba(32, 32, 52, 0.39); 看看是否能解决您的问题。