📜 ⬆️ ⬇️

With layout in IE

Good evening.
I ask for help from the web designers. The task is simple, but brought me to a standstill.
The task is as follows: it is necessary to make an input with angled edges.

I did this:
HTML
<input />

CSS
* {
margin:0px;
padding:0px;
}
*:focus {
outline: none;
}
.input{
background: url(/TCv2/design/images/inpt_r.gif) no-repeat 100% 0;
width:106px;
}
.input span{
position:absolute;
border-left:0px;
border-right:0px;
border-top:1px solid #b2b2b2;
border-bottom:1px solid #b2b2b2;
}
.input input{
border:0px;
height:22px;
width:100px;
font-size:12pt;
}

As a result, everything is fine in Firefox, as planned.

And IE increases the height by 2 pixels.


Help to overcome this, but I suffer no strength. Or tell me another option. All inputs will have a different width, but a fixed height.

')

Source: https://habr.com/ru/post/26041/


All Articles