Geek asks and answers

The input (submit) element takes up extra space in Firefox

Web page with link, input (view) and span. All are designed so that they look the same, in fact, the style entry has the same appearance as the hyperlink and range.

Tested using: Firefox 3.0, 3.6, 4.0, 14.0.1

For some reason, the entrance is a bit larger among others. In addition, input text does not align with link text and range. Here is a live demo.

http://jsfiddle.net/LGftW/

Here is my CSS:

a{
    text-decoration:none;
}

input[type="submit"]{
    border:0 none;
    background:transparent;
}

a, input[type="submit"], span{
    border:solid 1px green;
    font-size:64px;
    font-family:Arial;
    font-weight:bold;
    float:left;
    padding:0;
    margin:0;
}

Markup:

<a href="#">LINK</a>
<input type="submit" value="INPUT" />
<span>SPAN</span>

So, how can I make the input look like a regular link or space? Is this weird browser behavior, or did I just skip some CSS? I’ve been deciding this all day.

Edit

It seems that the problem only occurs in Firefox. IE8-9 and Chrome display it correctly.

+5
source share
1

Firefox input::-moz-focus-inner CSS:

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

EDITED: - .

firefox

+6

More articles:


All Articles