입력 유형 = Firefox에서 텍스트 세로 정렬 제출

입력 유형 = Firefox에서 텍스트 세로 정렬 제출

---

양식 버튼의 스타일을 지정하려고하는데 Firefox에서 맨 아래로 이동할 수없는 문제가 발생합니다.

특정 <a />s와 <input type="submit" />s를 동일하게 보이 도록 스타일을 지정하고 싶습니다 (호버 효과를 적용하기 위해 슬라이딩 도어 기술을 사용하는 버튼 배경 이미지가 있습니다.)

Firefox에서 입력 제출 텍스트가 예상보다 약간 낮다는 점을 제외하면 모두 훌륭하게 작동합니다. IE와 Safari / Chrome은 잘 작동합니다.

_{(출처 : muonlab.com )}

누구나 아이디어가 있습니까?

감사

<div class="buttons">
    <a href="#" class="button btn-small-grey">&laquo Back</a>
    <input type="submit" class="button btn-large-green" value="Save changes" />
</div>

.button
{
    cursor: pointer;
    border: 0;
    background-color: #fff;
    color: #fff;
    font-size: 1.4em;
    font-weight: bold;
    outline: 0;
    font-family: Arial, Verdana, Sans-Serif;
}

a.button
{
    display: block;
    float: left;
    text-align: center;
    text-decoration: none;
    padding: 5px 0 0 0;
    height: 22px;
    margin-right: 1em;
}

.btn-small-grey
{
    height: 27px;
    width: 96px;
    background-position: 0 -81px;
    background-image: url(/assets/images/buttons/buttons-small.gif);
}

.btn-large-green
{
    height: 27px;
    width: 175px;
    background-position: 0px -54px;
    background-image: url(/assets/images/buttons/buttons-large.gif);
}

---

I found this post because I had resolved this problem a few months ago and when I ran into it again today, I couldn't remember what I'd done. Nice. After poring over my css I finally located the "fix". I can't take credit because I found it on the web somewhere, but hopefully it will be as useful to you as it has been for me:

input::-moz-focus-inner /*Remove button padding in FF*/
{ 
    border: 0;
    padding: 0;
}

I hope this helps.

---

I have same problem every time I need to style form buttons. Sorry, quite busy at the moment so only brief description how I usually fix it.

In FF Text is usually a bit lower, exactly like on the image you attached and so then I simply apply "padding-bottom" on the button itself. It moves the text on the button number of pixels up.

The problem is it also moves text in IE and now IE looks a bit off. To fix that I apply "line-height" to the same button with exactly same value as the height of the button. That makes IE to ignore padding completely and positions the text right in the middle. Below is sample HTML code:

<input type="submit" value="SEARCH" class="search"/>

and CSS:

.search
{
    background: transparent url(../images/sprites.gif) no-repeat -310px 0; /* some button image */
    height: 29px;
    width: 104px;   
    border: 0; 

    /* centering text on button */
    line-height: 29px; /* FF will ignore this but works for IE. This value should be same as value of the height property above */
    padding-bottom: 2px; /* IE will ignore but works for FF */
}

Sorry I didn't applied it directly to your code but I'm a bit busy at the moment, hope you got the idea and it helps though.

ps. just checked in IE8 and all above moves text few pixels up. So it means more (endless?) mocking around with padding top/bottom.. I lost my patience now though and I think I'll be putting all this in separate stylesheet from now on that is until I find some fairly easy and universal solution for all this

---

Inputs are formatted not following the W3 box model convention in different browsers, you might want to include:

input /*Content follows box model*/
{ 
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;

    height:24px;
}

Also include for firefox (which Shelly pointed out):

input::-moz-focus-inner /*Remove button padding in FF*/
{ 
    border: 0;
    padding: 0;
}

Otherwise you could use button

I collected all these solutions from various sources, they deserve the credit

---

I had the same problem and I've solved (only for FF and Safari) by fixing the width but not the height and playing with the values: padding (top and bottom), line-height and if needed setting the vertical-align to middle. However all it's more easy to do if you set all the values (even the font size) in pixel.

---

EDIT: I think that there isn't a cross-browser solution, because the problem is due to the text rendering of the browsers. To solve completely the problem you could draw a background img with text and apply that image to the link or the button. Even if with this solution you lose in accessibility.

Alternatively you can use conditional CSS statements to improve the layout for each browser.

---

You could also consider replacing the the button with a different element altogether. The anchor element works perfectly. Just add a 'submit' function to it's 'onClick' event and you'll be good to go. I think this is a better (and simpler) cross browser solution.

ReferenceURL : https://stackoverflow.com/questions/1679952/input-type-submit-text-vertical-alignment-in-firefox