Question

我有以下C＃标记：

<asp:ImageButton ID="imgBtn" runat="server" CssClass="accordion-icon-close" value="" 
     CommandName="Edit" />

css类定义如下：

.accordion-icon-close
{
    background-image: url("../Images/ui-icons_888888_256x240.png");
    background-repeat: no-repeat;
    background-position: -32px -16px;
    display: block;
    height: 16px;
    width: 16px;
}

真的很简单，但不知何故，IE设法干涉图像周围的边界（因为它实际上是HTML中的输入标记），因此它们始终可见。 HTML标记是：

<input type="image" name="ctl00$MainContent$gvByPriorityCount$ctl02$imgBtn" id="MainContent_gvByPriorityCount_imgBtn_0" class="accordion-icon-close" value="" src="" />

我的问题： 如何删除IE围绕输入标记放置的边框？ Firefox没有显示边框，所以我确定这只是一些糟糕的IE行为。

我尝试使用jQuery以某种方式覆盖CSS，但无济于事。

$("input[type='image']").css('border-style', 'none !important;');

另外，我正在使用IE 8进行此测试。

感谢您的帮助！

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>

</title><link href="Styles/Test.css" rel="stylesheet" type="text/css" />
    <script src="../Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>

    <script type="text/javascript" language="javascript">
        if ($) {
            $(document).ready(function () {
                $("input[type='image']").css('outline', 'none !important;');
            });
        }
    </script>
</head>
<body>
    <form method="post" action="Test.aspx" id="form1">

<div class="aspNetHidden">

    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWBAKdjqv1AgKv/aZYAq/9uh0Cr/3+9QEioIHaMuCcNMLO+7F1bdAtcLLool6O9sR4U9mtwrnrYQ==" />
</div>
    <div>
    <div>
    <table cellspacing="0" rules="all" border="1" id="gvTest" style="width:100%;border-collapse:collapse;">
        <tr>
            <th scope="col">&nbsp;</th><th scope="col">ID</th>
        </tr><tr>
            <td valign="top">
                    <input type="image" name="gvTest$ctl02$imgBtn" id="gvTest_imgBtn_0" class="accordion-icon-close" value="" src="" style="border-width:0px;border-style:None;" />
                </td><td>1</td>
        </tr><tr>
            <td valign="top">
                    <input type="image" name="gvTest$ctl03$imgBtn" id="gvTest_imgBtn_1" class="accordion-icon-close" value="" src="" style="border-width:0px;border-style:None;" />
                </td><td>2</td>
        </tr><tr>
            <td valign="top">
                    <input type="image" name="gvTest$ctl04$imgBtn" id="gvTest_imgBtn_2" class="accordion-icon-close" value="" src="" style="border-width:0px;border-style:None;" />
                </td><td>3</td>
        </tr>
    </table>
</div>
    </div>
    </form>
</body>
</html>

Answer 1

我所做的只是在按钮中添加额外的样式：

<asp:ImageButton ID="but_qt_status" style="border-width:0px"...

我们在这里使用IE 8＆amp; 9

如何删除ASP.NET ImageButton的边框

1 个答案: