Question

我在RadFileUpload控件附近放了一个asp按钮。我已经尝试了很多方法来设置正确的外观，例如内联css，外部css，但它仍未设置。我的.aspx页面代码就像

<tr>
    <td class="formlabel2">
        <asp:Label ID="lblLName17" runat="server" Text="Photo:"></asp:Label>
    </td>
    <td valign="top" style="padding: 0px !important">
        <table width="275px" style="padding: 0px !important">
            <tr style="padding: 0px !important">
                <td width="200px" style="padding: 0px !important">
                    <telerik:RadAsyncUpload ID="RadAsyncUpload1" runat="server" AutoAddFileInputs="false"
                        OnClientFilesUploaded="HideRemoveBtn" Visible="true" OnClientFileUploadRemoved="ResizeTextBox"
                        MaxFileInputsCount="1" MultipleFileSelection="Disabled" TabIndex="17" OnFileUploaded="RadAsyncUpload1_FileUploaded"
                        Height="25px">
                    </telerik:RadAsyncUpload>
                </td>
                <td width="65px" valign="top" style="padding: -4px !important; vertical-align:top;">
                    <asp:Button Width="65px" ID="btnRomovePhoto" Visible="true" Text="Remove" runat="server" style="margin-top:0px"
                       OnClick="btnRomovePhoto_Click"></asp:Button>
                </td>
            </tr>
        </table>
    </td>
</tr>

这里我试图设置css类

 .btnRomovePhoto
{
    font-family: Arial,Helvetica,sans-serif;
    margin:0px !important;
    float:none !important;
    vertical-align:middle !important;    
    padding: 0 !important;
    text-align: center !important;    
}

使用cssClass =“btnRomovePhoto”，但在Mozilla和IE9中，此按钮看起来很大，并且在chrome和safari中看起来比上传控件高度小。如果我设置高度然后在Mozila和IE中文本显示在底部，即使我设置text-align和vertical-align。我尝试使用INPUT [Type = button]设置css并尝试使用Html按钮，但同样的问题发生了。

任何解决方案？

Answer 1

使用CSS3 box-sizing属性在总宽度中包含填充和边框。它修复了Firefox和IE填充问题

box-sizing: border-box; 
-webkit-box-sizing:border-box; 
-moz-box-sizing: border-box;

<强>更新

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="box_sizing._default" %>

<!DOCTYPE html>

<html>
<head runat="server">
    <title></title>
    <style type="text/css">
        /*********** CSS Reset Start *************************/
        /**** Add this to the beginning of your CSS file *****/
        html, body, div, span, applet, object, iframe,
        h1, h2, h3, h4, h5, h6, blockquote, pre,
        a, abbr, acronym, address, big, cite, code,
        del, dfn, em, img, ins, kbd, q, s, samp,
        small, strike, strong, sub, sup, tt, var,
        b, u, i, center,
        dl, dt, dd, ol, ul, li,
        fieldset, form, label, legend,
        table, caption, tbody, tfoot, thead, tr, th, td,
        article, aside, canvas, details, embed, 
        figure, figcaption, footer, header, hgroup, 
        menu, nav, output, ruby, section, summary,
        time, mark, audio, video {
            margin: 0;
            padding: 0;
            border: 0;
        }

        input[type="submit"]    
       {
            margin: 0;
            padding: 0;
            border: 0;
            box-sizing: border-box; 
            -webkit-box-sizing:border-box; 
            -moz-box-sizing: border-box;
           }
        /*********** CSS Reset End ***************************/
        /*****************************************************/
        .btnRemovePhoto,
        #btnRemovePhoto
        {
            height:40px;
            margin:20px 0 0 20px;
            border:1px solid #ff7373;
            padding:0 20px;
            font-family: sans-serif;
            font-size: 12px;
            color:#ff7373;
            line-height: 1;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:Button ID="btnRemovePhoto" CssClass="btnRemovePhoto" runat="server" Text="Remove" ClientIDMode="Static" />
        </div>
    </form>
</body>
</html>

Answer 2

你使用了行高吗？

line-height:<your value>;

ASP按钮对于不同的浏览器看起来不同

2 个答案: