Css em triangle и еще 1 вопрос

[Cryolite]

Добрый день

Сделал флажок с помощью :after

?<div class="flag-header"><a href="#">eeeee</a></div>?

body {
font-size: 100%;
}

.flag-header {
font-size: 1em;
font-weight: bold;
background: green;
color: black;
padding: .75em 4em .5em 2em;
display: inline-block;
*display: inline;
zoom: 1;
position: relative;
overflow: hidden;
}

.flag-header a {  
color: black;
font-weight: bold;
}

.flag-header:after {
	content: "";
	position: absolute;
	right: 0;
	margin-top: -.6em;
	border-right: 1.2em solid #fff;
	border-top: 1.2em solid transparent;
	border-bottom: 1.2em solid transparent;
	border-left: 0;
	width: 0; 
	height: 0;
} 

При увеличении размера шрифта в body флажок масштабируется нормально, однако при изменении масштаба ctrl+/ctrl-. after-часть увеличивается непропорционально. (А если перевести в пиксели он останется постоянного размера, что в данном случае не подходит). Есть ли смысл менять и если да, то в какую сторону смотреть.

2) как лучше делать input type="text" (блок search), если контент em ный. На данный момент оставил c фиксированным width и шрифтом в px.

<div class="search">
	<input type="text" />
	<input type="button" value="bg_image " />
</div>

Edited December 6, 2012 by Cryolite

[Cryolite]

Возможно не корректно задал вопрос. Попробую переформулировать.

1) Стоит ли в первом случае обращать внимание на масштабирование?

2) Стоит ли привязывать инпуты к em ам или оставить в пикселях. Ведь если размер шрифта большой инпут может сломаться.

3) Какой максимальный font-size в % (обычно) стоит учитывать при верстке.

Буду признателен за совет

[Cryolite]

Еще актуально