我在 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 中，即使我设置了文本对齐和垂直对齐，文本也会显示在底部。我尝试使用 INPUT[Type=button] 设置 css 并尝试使用 Html 按钮，但出现了同样的问题。
任何解决方案？
最佳答案
使用 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>
关于asp.net - 不同浏览器的 ASP 按钮看起来不同，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18267805/