3

次の 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>
4

1 に答える 1

1

私がしていることは、ボタン内に余分なスタイルを追加することです:

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

ここでは IE 8 & 9 を使用します

于 2012-06-20T09:35:00.237 に答える