文本区域与em不工作在IE和Opera [英] Text-area with em not working in IE and Opera

问题描述

这是我第一次尝试在em测量中制作完整的网页布局。

这个页面在Firefox和chrome中完美，但在IE（我有IE9）和Opera（昨晚更新） -area显着地射击边界。在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％'。
如果您需要检查，请点击此链接。

解决方案

我认为问题是由于 #pad 。

当你设置一个基本font-size，例如18px时，所有的子元素都会处理 1em as 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中发生的是，在的宽度之前将font-size更改为 1.2em c $ c>。所以在Firefox和Chrome中的宽度是 26 * 18px 其中在IE中的宽度是 26 * 22px 为了解决这个问题，我将宽度设置为百分比而不是固定的 em 。

编辑

看起来Opera不喜欢这样的事实，即 border-width 和 border-style

尝试将 border-color 更改为 border：1px solid rgba（32，32 ，52，0.39）; ，看看是否能解决您的问题。

This is my first attempt to make a complete webpage layout in 'em' measurements. I am building a live preview markdown editor.

This page works perfectly in Firefox and chrome, but in IE(i have IE9) and Opera(updated last night) The text-area shoots the boundary significantly. In Opera, the border of textarea is also not showing rounded corners. ( text area is showing rounded corner but not its border)

This is css for the textarea

#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;

}

and this is the html snippet

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

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

I have set 'font: 100%' in the body. Here is the link of demo if you need to check it.

解决方案

I think the problem is caused by the changing of the font-size in #pad.

When you set a base font-size, for example 18px, then all the child elements treat 1em as 18px. However, if you change the font-size in one of the children to 1.2em then all the child elements nested within that child will start treating 1em as 22px:

body {
    font-size: 18px;
}

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

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

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

What I think is happening in Internet Explorer is that the font-size is being changed to 1.2em before the width of #pad is calculated. So the width in Firefox and Chrome is 26 * 18px where as in IE the width is 26 * 22px.

To get around this, I would set the width as a percentage instead of a fixed em measurement.

Edit

In regards the the rounded corners issue in Opera; it seems that Opera does not take kindly to the fact that neither the border-width nor border-style have been set.

Try changing border-color to border: 1px solid rgba(32, 32, 52, 0.39); and see if that resolves your issue.

这篇关于文本区域与em不工作在IE和Opera的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！