In the past two days, I took over the work of a former employee and found a general button style with compatibility problems in IE.
Code First
| The code is as follows: |
Copy code |
|
Display: inline-block; line-height: 18px; margin-left: 5px; border: 1px # c4c3c3 solid; background: url (.. /images/bg_my3.gif) 0 0 repeat-x; text-align: center; cursor: pointer; width: 45px
|
The effect we want is FF and IE8, as shown in the figure below.
However, in IE6 and IE7, a white edge is added to the bottom, as shown in the following figure.
The three buttons do not have a height setting. If I have set height, IE8, and FF, it is still normal. But IE6 and 7 are like this.
Search for a large number of materials on Google and draw a conclusion:
After the padding and border are cleared for the button, ie6 and 7 will generate 1 pixel space at the top margin, firefox2, 3 (beta5) it will generate a blank space of 3 pixels in the left and right margins and 1 pixel in the top margin.
Cannot this BUG be solved?
So I am not dead-hearted, while discussing with JQuery jungle friends, while continuing to google ~ At last, Huang Tianyan suffered a lot. On this webpage, I was inspired to find that changing line-height to 16px or 14px can achieve good results in IE6, as shown in the figure below.
However, when line-height: 16 PX, the effect of IE7 is
When line-height: 14px, the effect of IE7 is
In fact, these two results are almost the same, but I think when line-height: 16px, the white space at the bottom is a little higher than the white space at line-height: 14px (okay, I admit that I am a good guy .) So I am sure to add * line-height: 14px to my style;
I don't know if I found it. The words in line-height: 14px; IE7 are close to the top and almost no padding (padding-top. So I added a + padding-top: 1px;
Although the + padding-top: 1px is added, the effect is still unsatisfactory because the text is not actually vertically centered. However, I have limited capabilities. Hope everyone can contribute a better solution!
Finally, let's sort the effects of different browsers together.
FF
IE8
IE7
IE6
The code is as follows:
| The code is as follows: |
Copy code |
Line-height: 18px; * line-height: 14px; + padding-top: 1px; margin-left: 5px; border: 1px # c4c3c3 solid; background: url (.. /images/bg_my3.gif) 0 0 repeat-x; text-align: center; cursor: pointer; width: 45px
|
However, why are other people so irresponsible? The spacing between the three buttons is also significantly different. Fortunately, there is basically the same in IE, but there is a difference between IE and FF, I will continue to adjust ......
