2

这是我第一次尝试在“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>

我在正文中设置了“字体：100%”。 如果您需要检查它，这是演示的链接。

4

2 回答 2

4

我认为问题是由#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 中发生的事情是在计算of1.2em之前将字体大小更改为。因此，Firefox 和 Chrome 中的宽度与 IE 中的宽度相同。width#pad26 * 18px26 * 22px

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

编辑

关于Opera的圆角问题；似乎 Opera 对既未设置也未设置的事实并不border-width友好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 回答