代码之家 › 专栏 › 技术社区 › Juri

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

css html asp.net

Juri · 技术社区 · 17 年前

这将很难解释。我希望我能。

.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

<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

alt text http://img23.imageshack.us/img23/2373/buttonie.jpg

//编辑:

2 回复 | 直到 17 年前

Andrew Duffy 17 年前

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

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

在这里:

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

TigerTiger 17 年前

只需先尝试对提交按钮进行css重置(在css文件的开头)。例如,将边距、填充等设置为零。

/**
* 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; } 也。