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

这是我第一次尝试用“em”来做一个完整的网页布局。我正在构建一个实时预览标记编辑器

这个页面在Firefox和chrome中运行得非常好，但在IE（我有IE9）和Opera（昨晚更新）中，文本区域的边界明显突出。在Opera中，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>

我在正文中设置了“字体：100%”。

---

对于特殊的css3功能，请为每个浏览器使用供应商前缀：
而不是

边界半径：1em 1em 1em使用：

-webkit-border-radius:1em;
-moz-border-radius:1em;
-o-border-radius:1em;
-ms-border-radius:1em;
border-radius:1em;

对于特殊的css3功能，请为每个浏览器使用供应商前缀：

而不是
边界半径：1em 1em 1em使用：

-webkit-border-radius:1em;
-moz-border-radius:1em;
-o-border-radius:1em;
-ms-border-radius:1em;
border-radius:1em;

我认为这个问题是由于更改了
#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
的
宽度之前，字体大小被更改为
1.2em
。因此Firefox和Chrome中的宽度是
26*18px
，而IE中的宽度是
26*22px

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

编辑

关于歌剧中的圆角问题；Opera似乎不喜欢既没有设置
边框宽度
也没有设置
边框样式

尝试将
边框颜色更改为
边框：1px实心rgba（32,32,52,0.39）
并查看是否解决了您的问题。
我认为问题是由于更改了
#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
的
宽度之前，字体大小被更改为
1.2em
。因此Firefox和Chrome中的宽度是
26*18px
，而IE中的宽度是
26*22px

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

编辑

关于歌剧中的圆角问题；Opera似乎不喜欢既没有设置
边框宽度
也没有设置
边框样式

尝试将
边框颜色更改为
边框：1px实心rgba（32,32,52,0.39）并查看这是否解决了您的问题。
否。标准属性
边界半径
适用于现在的年龄。答案中不需要任何供应商前缀属性。更重要的是，你的答案不会解决问题中描述的问题。不。。仍然不起作用。奇怪的是，textarea显示出它的圆角，但它的边界在opera中保持笔直。我还以为总是这样problem@thirtydot：如果具有ff3的用户访问该站点怎么办？圆形边框对他来说不重要吗？我的主要问题是，在IE和Opera中，文本区域超出了预期的布局。检查链接。Firefox现在已经升级到13版了。如果用户的浏览器比当前版本落后十个主要版本，而用户看不到圆角，这真的很重要吗？我不这么认为。我建议你删除这个答案，因为它没有用，也不能回答问题。不。标准属性
边界半径
适用于现在的年龄。答案中不需要任何供应商前缀属性。更重要的是，你的答案不会解决问题中描述的问题。不。。仍然不起作用。奇怪的是，textarea显示出它的圆角，但它的边界在opera中保持笔直。我还以为总是这样problem@thirtydot：如果具有ff3的用户访问该站点怎么办？圆形边框对他来说不重要吗？我的主要问题是，在IE和Opera中，文本区域超出了预期的布局。检查链接。Firefox现在已经升级到13版了。如果用户的浏览器比当前版本落后十个主要版本，而用户看不到圆角，这真的很重要吗？我不这么认为。我建议您删除此答案，因为它没有用，也不能回答问题。完全用
em
度量构建页面是本项目的挑战之一，还是您愿意使用
%
？我个人会将宽度设置为百分比（例如，
90%
），而不是固定的
em
测量值。我会尝试使用百分比。谢谢我可以自由使用%，我正在努力学习如何在网页中进行流畅的布局。早些时候，我在这个网页中使用了px，但右边的div在我的friends square监视器上向下移动。这就是我想改变我的技术的时候。完全用
em
度量构建页面是本项目的挑战之一，还是您愿意使用
%
？我个人会将宽度设置为百分比（例如，
90%
），而不是固定的
em
测量值。我会尝试使用百分比。谢谢我可以自由使用%，我正在努力学习如何在网页中进行流畅的布局。早些时候，我在这个网页中使用了px，但右边的div在我的friends square监视器上向下移动。那时我想改变我的技术。