[CSS] Knoppen verschillende grootte in IE en Chroom
Ik heb deze css:
Code (css)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
.button_graydient {
padding-left: 0px;
margin-top: 10px;
border: 1px solid #CACACA;
border-radius: 4px 4px 4px 4px;
font-weight: bold;
color: #3b4043;
vertical-align: middle;
background:#cfd1cf;
background:-webkit-gradient(linear,left top,left bottom,from(#f5f5f5),to(#cfd1cf));
background:-moz-linear-gradient(top,#f5f5f5,#cfd1cf);
background:-webkit-linear-gradient(top,#f5f5f5,#cfd1cf);
background:-o-linear-gradient(top,#f5f5f5,#cfd1cf);
background:-ms-linear-gradient(top,#f5f5f5,#cfd1cf);
background:linear-gradient(top,#f5f5f5,#cfd1cf);
filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr='#f5f5f5',endColorstr='#cfd1cf');
}
.button_graydient span {
display: inline-block;
cursor: default;
}
.i-left {
padding-top: 2px !important;
padding-bottom: 2px !important;
padding-right: 10px;
text-indent: 24px;
}
.login_pict {
background: url(/images/system/ent_lock.png) no-repeat 5px 50%/16px 16px;
}
padding-left: 0px;
margin-top: 10px;
border: 1px solid #CACACA;
border-radius: 4px 4px 4px 4px;
font-weight: bold;
color: #3b4043;
vertical-align: middle;
background:#cfd1cf;
background:-webkit-gradient(linear,left top,left bottom,from(#f5f5f5),to(#cfd1cf));
background:-moz-linear-gradient(top,#f5f5f5,#cfd1cf);
background:-webkit-linear-gradient(top,#f5f5f5,#cfd1cf);
background:-o-linear-gradient(top,#f5f5f5,#cfd1cf);
background:-ms-linear-gradient(top,#f5f5f5,#cfd1cf);
background:linear-gradient(top,#f5f5f5,#cfd1cf);
filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr='#f5f5f5',endColorstr='#cfd1cf');
}
.button_graydient span {
display: inline-block;
cursor: default;
}
.i-left {
padding-top: 2px !important;
padding-bottom: 2px !important;
padding-right: 10px;
text-indent: 24px;
}
.login_pict {
background: url(/images/system/ent_lock.png) no-repeat 5px 50%/16px 16px;
}
En dit in html:
Code (html)
1
2
3
2
3
<div class="div_bottom">
<button class="button_graydient"><span class="login_pict i-left">INLOGGEN</span></button>
</div>
<button class="button_graydient"><span class="login_pict i-left">INLOGGEN</span></button>
</div>
In IE11 krijg ik dit:
En in Chrome dit:
Ik heb de paddings op diverse plaatsen uitgeprobeerd, maar het effect blijft hetzelfde.
Iemand enig idee wat (en of) ik iets fout doe?
Gewijzigd op 03/01/2015 18:35:14 door Ger van Steenderen
Het is volgens mij trouwens IE die teveel padding toekent.
Code (css)
1
2
3
4
2
3
4
.button_graydient
{
box-sizing: border-box;
}
{
box-sizing: border-box;
}
Toevoeging op 03/01/2015 20:24:09:
Leesvoer: http://css-tricks.com/box-sizing/
Nee, als je de plaatjes ziet is de verhouding anders.
@Eddy
Maakt ook geen verschil.
Op de een of andere manier wordt door IE de padding verdubbeld. In Chroom en Safari staat het gewoon goed.
Dus je reactie heeft me wel op weg geholpen, ik ben tot de conclusie gekomen dat ik me er niet druk om ga maken. Ik heb de padding wat groter gemaakt zodat ie in Chroom de afmeting heeft die me voor ogen staat, en dan is ie in IE maar wat groter.