Border: none works in IE8 but not IE7?

问题:

I have text inputs with 1px padding that I sometimes put 1 px borders on. I want all text inputs to fill the same vertical space, borders or not. To achieve that, I created a "don't have borders, but fill space like you do" class with border: none and 2px of padding:

.BorderInputNone {
 border: none;
 padding: 2px;
}

This worked in IE8, but in IE7, there were visible borders around the input.

EDIT: I fixed it by using border: transparent.

.BorderInputNone {
border: 1px solid transparent;
padding: 1px;
}

回答1:

Use border: 0px; as it seems more cross browser compatible.

Check this question here question here

Here is an example for you to fix IE7:

http://jsfiddle.net/Z7Uee/

回答2:

I fixed it by using border: transparent.

.BorderInputNone {
border: 1px solid transparent;
padding: 1px;
}