I’ve worked on many projects where in I had to style the form/input buttons using custom background images. That is, I had to hide the default text of the button. It’s not a big deal, I know. But it is, when it comes to IE. Let’s review this in detail.
The following image(button background) has been used for this tutorial. You may right click and save it.
1: HTML Code
Create a HTML page and insert a button with a class, “button”.
<html> |
<head> |
<title>ProductiveDreams</title> |
<link href=”style.css” rel=”stylesheet” type=”text/css”/> |
</head> |
<body> |
<input type=”submit” value=”Submit” class=”button”> |
</body> |
</html> |
2: Style Sheet
I included the following in my stylesheet.
input.button {
|
width:114px; |
height:37px; |
border: none; |
background: transparent url(images/submit_btn.gif) no-repeat center; |
overflow: hidden; |
text-indent: -999px; |
} |
Fixed width, overflow:hidden and negative text indent will hide the text of any button. This works well in all browsers except IE.
3: The Problem
The image below shows how IE displays the button.
You can see the black text within the button which looks odd.
4: IE Fix
So finally, here goes the three line CSS code that does the work for you.
Modify your CSS as shown below.
input.button{
|
width:114px; |
height:37px; |
border: none; |
background: transparent url(images/submit_btn.gif) no-repeat center; |
overflow: hidden; |
text-indent: -999px; |
| |
font-size: 0; |
display:block; |
line-height: 0; |
} |
5: How it works
Let’s see how it works.
font-size:0 is used to reduce the font size and works well in IE7. But even after adding this line, you would notice a black line(which is basically the text) on the center of the button in IE6.
display:block Negative text-indent works in IE only if this is added.
line-height: 0 Another fix for IE6.
I have included the sample files for your reference.
转自：http://www.productivedreams.com/ie-not-intepreting-text-indent-on-submit-buttons/
PS.在上班，没什么空编辑，回去再搞~~~~
6408
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
