Текстовая область с em, не работающая в IE и Opera

Question

Это моя первая попытка сделать полный макет веб-страницы в измерениях «em». Я создаю редактор предварительного просмотра в реальном времени.

Эта страница отлично работает в Firefox и Chrome, но в IE (у меня IE9) и Opera (обновляется вчера вечером). Текстовая область значительно увеличивает границы. В Opera граница текстовой области также не показывает закругленные углы. (Текстовая область показывает закругленный угол, но не его границы)

Это 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 является то, что размер шрифта изменяется на 1.2em до width из #pad. Таким образом, ширина в Firefox и Chrome равна 26 * 18px, где, как и в IE, ширина равна 26 * 22px.

Чтобы обойти это, я бы установил ширину в процентах вместо фиксированного измерения em.

Редактировать

В отношении вопроса закругленных углов в Opera; кажется, что Opera не любезно относится к тому, что не установлены ни border-width, ни border-style.

Попробуйте изменить border-color на номер border: 1px solid rgba(32, 32, 52, 0.39); и посмотреть, не решена ли эта проблема.

Answer 2

для специальных функций 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;