不同瀏覽器的ASP按鈕看起來不同

我已經把一個asp按鈕放在RadFileUpload控件附近。我已經嘗試了很多方法來設置正確的外觀，例如內聯CSS，外部CSS，但它仍然沒有設置。我的.aspx頁面中的代碼是這樣不同瀏覽器的ASP按鈕看起來不同

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

在這裏，我嘗試使用的CssClass =「btnRomovePhoto」，但Mozilla和IE9此按鈕顯得又大又在Chrome設置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;  
}

和safari這個看起來比上傳控制高度小。如果我在Mozila和IE中設置高度，即使設置了文本對齊和垂直對齊，文本也會顯示在底部。我已經嘗試使用INPUT [Type = button]來設置CSS並嘗試使用Html按鈕，但同樣的問題發生。

任何解決方案？

來源

2013-08-16 user2496448

對不起了我的錯誤.. Mozilla和Chrome瀏覽器...我想寫的Chrome而不是Firefox瀏覽器。 – user2496448

首先要檢查：瀏覽器是否以怪癖模式運行。特別是對IE來說，這可能會造成很大的差異，並會導致相同代碼的瀏覽器特定差異。 – Spudley

焦點話題：所有這些「重要」標誌都是令人擔憂的。過度使用'！important'是不好的，因爲如果你需要的話很難覆蓋它，但它也是其他地方可能的其他糟糕代碼的一個指示器，因爲如果你需要使用'！important'，這意味着你'已經無法讓您的CSS覆蓋正常工作。這些跡象表明你的CSS可以使用一些整理工作。 – Spudley

使用CSS3框大小屬性在總寬度中包含填充和邊框。它修復了Firefox和IE的填充問題

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

UPDATE：

<%@ 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>

來源

2013-08-16 07:23:29

我試過。但它不工作..當我設置按鈕的高度文本顯示在底部。 – user2496448

請參閱更新。 –

你用行高？

line-height:<your value>;

來源

2013-08-16 09:34:02 Ryxle

我試過了。不要影響任何。我使用螢火蟲進行審查時發現，在Mozilla中沒有應用該css的效果 – user2496448

不同瀏覽器的ASP按鈕看起來不同

回答

相關問題