HTML输入类型提交:IE上的宽度问题

Question

这将很难解释.我希望我能够.

我最近创建了一个自定义ASP.net服务器控件,代表一个工具栏.工具栏包含按钮,因此HTML元素.为了允许我添加图像,我使用CSS将其添加到背景中.我在input元素上应用的CSS如下所示:

.button{
    padding: 2px 2px 2px 2px;
    margin-right: 2px;
    border: 1px solid #999;
    cursor: pointer;
    text-decoration: none;
    color: #606060;
}

此外,按钮本身(通过样式标签;这是因为这些按钮是自动渲染的,不应该由最终程序员更改)我有定义背景图像的样式和一些其他设置

background-attachment:scroll;
background-image:url(images/select.png);
background-position:left center;
background-repeat:no-repeat;
padding-left:15px;

在padding-left需要ST文本背景图片后面不走.所以最后你会有类似的东西

<input type="submit" style="background-image: url(images/select.png); background-attachment: scroll; background-repeat: no-repeat; background-position: left center; padding-left: 15px;" class="button" id="someId" value="Save" name="someName"/>

在Firefox上(像往常一样)一切都很完美.我的问题是在IE上(在IE 7上测试但我需要从IE 6+兼容),如果你输入一个很长的文本作为按钮文本,按钮会放大,基本上是按钮前后的空间文本随文本的大小而增加.要在图像之后立即按钮,我将线条添加text-align:right到button类中.

为了更好地说明它......
在Firefox上:
替代文字http://img268.imageshack.us/img268/311/buttonfirefox.jpg

在IE上:
替代文字http://img23.imageshack.us/img23/2373/buttonie.jpg

有没有人有任何关于如何解决这个问题的建议？

//编辑:
我当然可以做的是在按钮上指定一个固定的宽度,直到看起来很漂亮.如果可能的话,我想避免这种情况.

Answer 1

这是一个老虫子.您需要添加溢出:按钮可见.这里还有更多:

http://jehiah.cz/archive/button-width-in-ie

和这里:

http://www.brandnewbox.co.uk/articles/details/removing_padding_from_ie_buttons/