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 s.t.文本不会落后于背景图像。所以最后你会有像

这样的东西

<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上：
alt text http://img268.imageshack.us/img268/311/buttonfirefox.jpg

在IE上：
alt text http://img23.imageshack.us/img23/2373/buttonie.jpg

有没有人对如何解决这个问题有任何建议？

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

Answer 1

这是一个老bug。您需要添加溢出：按钮可见。这里有更多：

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

在这里：

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

Answer 2

首先尝试重置提交按钮（在css文件的开头）。例如，margin，padding等设置为零。

我不太确定如何重置提交按钮..

但您可以尝试关注并测试

/**
* Reset browser defaults
* Author: Tim Wright - csskarma.com
* Last updated: 04.19.2009
----------------------------------*/

body,div,dl,dt,dd,ul,ol,
li,h1,h2,h3,h4,h5,h6,
pre,form,fieldset,p,
blockquote,th,td          { margin:0;padding:0; }
body                      { line-height:1;color:#121212;background:#fff; }
h1,h2,h3,h4,h5,h6,p       { font-size:100%;font-weight:400; }
ol,ul                     { list-style:none; }
caption,cite,code,th      { font-style:normal;font-weight:400; }
fieldset,img              { border:0; }
caption,th                { text-align:left; }
:focus                    { outline:1px dotted #eee; }
table                     { border-collapse:collapse;border-spacing:0; }
hr                        { border:0;border-top:1px solid #555;margin:0;height:1px; }
label,button              { cursor:pointer; }

根据@Andrew的回答，您也可以尝试* html input { overflow: visible; }。

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

2 个答案: