asp:IE7中的按钮宽度问题,由于某种原因在左边增加了额外的100px?

时间:2011-08-09 20:05:19

标签: aspbutton

出于某种原因,IE7中的asp:按钮在按钮左侧添加了额外的100px(或左右)。这给我的CSS样式造成了问题。当然,我可以通过给出精确的像素尺寸来进入并覆盖每个单独的按钮..但是这将是一个痛苦的屁股,因为我的公司建立的应用程序有近50页涉及每页约10个按钮(你可以做数学!)。我宁愿让asp:按钮增长,因为它需要取决于文本的大小/宽度。

非常感谢任何帮助。

ASPX(html)

<div class="sales-order-buttons">
   <asp:Button ID="btnSearchSalesOrders" runat="server" Text="Search Sales Orders" />
   <asp:Button ID="btnViewAssociatedOrders" runat="server" Text="View Associated Orders" />
</div>

CSS

input[type="submit"] {
   background: url("../images/arrow.png") no-repeat left red;
   color: #006aae;
   float: left;
   text-align: left;
   display: block;
   width: auto;
   margin-left: 10px;
   text-indent: 40px; 
}

input[type="submit"]:hover { 
   color: #009CFF; 
   cursor: pointer;
}

1 个答案:

答案 0 :(得分:0)

这是一个已知问题,例如请参阅Remove extra padding in IE button,正如您在评论中提到的那样,解决方案如下:

/* this is to fix IE 6 and 7 which create extra right/left padding on buttons
 * IMPORTANT: because IE 6 does not understand the first selector below, you need to apply the class "inputButton" to all input of type="button" in your documents
 * the first declaration is for IE 6 and 7, the second one for IE 6 only, the third one is for all browsers.
 */
button,
input[type="submit"],
input[type="reset"],
input[type="button"],
.inputButton {
  *overflow: visible;
  _width: 0;
  padding: .2em .4em;
}

针对浏览器中任何其他功能的更强大的解决方案是使用CSS 重置/基础

尝试这个(我能找到的唯一一个直接解决这个特定IE bug的人):http://blog.teamtreehouse.com/setting-rather-than-resetting-default-styling, CSS基础:http://tjkdesign.com/ez-css/css/base.css