Position of text in text differs from browser
The position of the text in the text is different because it is in firefox / chrome or opera / ie. I have a button and text. In opera it is slightly lower than in firefox.
HTML:
<button>
some
</button>
CSS:
button {
width:145px;
height:36px;
border: 0;
color:#fff;
}
How can I prevent this text button "jumping"?
Also a bonus question: can someone know how to prevent this different font rendering in browsers? (See Pictures)
PS I googled this - couldn't find an answer
EDIT: FIDDLE
EDIT_2: Browsers have been updated to the latest versions. (Maybe an IE exception, but opera is also a problem). OS: Windows 8.1 Industry Pro
source to share
You haven't specified the font size and font size, so the other browser uses the button font as it belongs. Setting these parameters explicitly solves the problem:
button {
width:145px;
height:36px;
border: 0;
color:#fff;
font: 16px normal Arial;/*change as per your requirement*/
}
Update:
I came to a solution for a key issue with a button tag. Default style button display: inline-block;
.
And different browsers have different vertical alignments (top, middle, ...), so locking vertically on the button fixes the problem.
So, far beyond the css button add this line of code:
vertical-align: middle;
source to share
In Windows Explorer and Opera, it turns out the difference between font-weight: 600 and font-weight: bold ...
http://www.quirksmode.org/css/tests/iewin_fontweight.html
Use font-weight: 700;
.
button {
position: relative;
width:145px;
height:36px;
line-height: 36px;
border: 0;
color:#fff;
font-size:16px;
font-weight:700;
border-radius: 10px;
font-family:"Myriad Pro", "Verdana", sans-serif, serif;
background: -moz-linear-gradient(top, #00a885 49%, #009979 54%);
background: -o-linear-gradient(top, #00a885 49%, #009979 54%);
background: -webkit-linear-gradient(top, #00a885 49%, #009979 54%);
background: -ms-linear-gradient(top, #00a885 49%, #009979 54%);
margin:0;
margin-top:14px;
box-shadow: 1px 1px 4px rgba(0,0,0,0.64);
text-shadow: 1px 1px 5px rgba(0,0,0,0.74);
padding: 0;
}
<button>some</button>
source to share