IE not interpreting text-indent on submit buttons ?

最新推荐文章于 2024-07-27 22:51:17 发布

aizhiliu7114

最新推荐文章于 2024-07-27 22:51:17 发布

阅读量123

点赞数

文章标签： php

原文链接：http://www.cnblogs.com/johngeng/archive/2009/07/18/1526256.html

版权

Reference: http://www.productivedreams.com/ie-not-intepreting-text-indent-on-submit-buttons/

Author: Gopal Raju

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


<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.

CSS


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.

CSS


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: 0px;
display:block;
line-height: 0px;
}

5: How it works

Let’s see how it works.

font-size:0px 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: 0px Another fix for IE6.

I have included the sample files for your reference.

http://www.productivedreams.com/wp-content/plugins/download-monitor/download.php?id=pd_textindent_ie.zip

转载于:https://www.cnblogs.com/johngeng/archive/2009/07/18/1526256.html

aizhiliu7114

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
IE not interpreting text-indent on submit buttons ?

Reference: http://www.productivedreams.com/ie-not-intepreting-text-indent-on-submit-buttons/Author: Gopal RajuI’ve worked on many projects where in I had to style the form/input buttons us...
复制链接

扫一扫

01
02	<html>
03	<head>
04	<title>ProductiveDreams</title>
05	<link href=”style.css” rel=”stylesheet” type=”text/css”/>
06	</head>
07	<body>
08	<input type=”submit” value=”Submit” class=”button”>
09	</body>
10	</html>
11

01
02	input.button {
03	width:114px;
04	height:37px;
05	border: none;
06	background: transparent url(images/submit_btn.gif) no-repeat center;
07	overflow: hidden;
08	text-indent: -999px;
09	}
10

01
02	input.button{
03	width:114px;
04	height:37px;
05	border: none;
06	background: transparent url(images/submit_btn.gif) no-repeat center;
07	overflow: hidden;
08	text-indent: -999px;
09
10	font-size: 0px;
11	display:block;
12	line-height: 0px;
13	}