asp:IE7 中的按钮宽度问题，由于某种原因向左侧添加了额外的 100px？

发布于 2024-11-29 00:25:53 字数 832 浏览 3 评论 0原文

由于某种原因，IE7 中的 asp:button 在按钮左侧添加了额外的 100px（大约...）。这给我的 CSS 样式带来了问题。当然，我可以通过给定精确的像素尺寸来覆盖每个单独的按钮……但这会很痛苦，因为我公司构建的应用程序有近 50 个页面，每页大约有 10 个按钮（你可以这样做）数学！）。我宁愿让 asp:button 根据文本的大小/宽度按需增长。

任何帮助将不胜感激。

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;
}

原文

For some reason the asp:button's in IE7 add an extra 100px's (or so...) to the left of the button. this creates a problem for my css styling. Sure, I could go in and overwrite each individual button by giving it exact pixel dimensions.., but that would be a pain in the ass since the application my companies building has nearly 50 pages involved with about 10 buttons per page (you can do the math!). I would much rather let asp:button grow as it needs to depending on the size/width of the text.

Any help would be much appreciated.

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;
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

耳钉梦 2024-12-06 00:25:53

这是一个已知问题，例如请参阅删除 IE 按钮中的额外填充并作为您在评论中提到解决方案如下：

/* 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 reset/base：

尝试这个（我能找到的唯一一个解决此问题的解决方案）特定的 IE 错误直接）： http://blog.teamtreehouse.com/setting-rather -比重置默认样式，
CSS 基础： http://tjkdesign.com/ez-css/css/base.css

This is a known issue, e.g. see Remove extra padding in IE button and as you mentioned in the comments the solution looks like:

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

A more robust solution for any other funnies across browsers is to use a CSS reset/base:

Try this one (the only one that I could find that address this specific IE bug directly): http://blog.teamtreehouse.com/setting-rather-than-resetting-default-styling ,
CSS base: http://tjkdesign.com/ez-css/css/base.css

回复收藏 0 原文

~没有更多了~