IE8 <input type="button"> - CSS hover does not work with border and padding set to 0_问答_开发者

IE8 <input type="button"> - CSS hover does not work with border and padding set to 0

开发者 https://www.devze.com 2023-02-14 09:11 出处：网络

Test page: <!DOCTYPE html> <html> <head> <title>button border hover test</title>

Test page:

<!DOCTYPE html>
<html>
    <head>
        <title>button border hover test</title>
        <style type="text/css">
            input
            {
                border: 0;
                padding: 0;
        开发者_开发百科    }

            input:hover
            {
                background-color: fuchsia;
            }
        </style>
    </head>
    <body>
        <form>
            <input type="button" value="input element" /><br>
        </form>
    </body>
</html>

The background colour does not change. If you set the padding to anything higher than 0, the background colour does change. I'm not seeing this behaviour in Firefox.

Having a padding of 1px isn't disruptive to the layout, but does anyone know of a way to make this work with 0 padding?

There are two possible solutions.

Use a <button> element instead.
Use padding. But even then, sometimes the hover doesn't work.

Some relevant information from http://www.sitepoint.com/forums/showthread.php?769898-button-vs.-input-type-quot-button-quot

<button> can contain HTML, and is easier to style with CSS, which actually gets applied across browsers. However, there are some drawbacks to using it in IE. IE doesn't properly detect the value attribute (and uses the tag's content instead as the value), and all values are sent to the server, whether or not the button is clicked. This makes using it as a a little tricky.

<input type="submit"> doesn't have any value or detection issues. However, you can't add HTML like with and can only use the value tag. It's also harder to style, and the styling doesn't always respond well across browsers.

Welcome to the club. This was driving me crazy. I have a table with buttons in the last column. When you hover over a row, the background changes. If you hover over the button in the row, the text color on the button changes as well as the row background. I had 0 padding on the buttons. All this works great in FF with no problems.

In IE8, a whole nuther story. The row hover worked great but when you hovered over the button in the row, nothing happened. The row background didn't change and the button text color didn't change (99.99% of the time).

I played with this and finally realized what was going on. It seems to be that hover doesn't work while over button text. I added 20px of padding on each side of the text on the button. If I slide my cursor down the buttons in the padded area (not touching the text) it worked as well as FF. As soon as I slide the cursor down the middle of the buttons (through the button text), it breaks.

Go figure. I HATE IE!!!!