Question

我的CSS格式在Firefox，Chrome和Opera上运行良好，但Safari浏览器出现问题。我尝试了一些我在网上找到的但没有用的方法。我最需要的是将文本输入的垂直边框留在与文本框相同的垂直线上：“napisz do nas”和多行框，以便在Firefox上查看下方按钮的宽度

Screen from Firefox

Screen from Safari

这是CSS代码：

.button{
cursor:pointer;
margin-bottom: 5px;
background-color:#ECECFF;
color:#000000;
width:140px;
padding:2px;
text-align:center;
font-weight:bold;
/*/*/border:1px solid #000000;/* */
}
.button1{
cursor:pointer;
margin-bottom: 5px;
background-color:#ECECFF;
color:#000000;
width:100px;
padding:2px;
text-align:center;
font-weight:bold;
/*/*/border:1px solid #000000;/* */
}
.clean{
cursor:pointer;
margin-bottom: 5px;
background-color:#ECECFF;
color:#000000;
width:73px;
padding:2px;
text-align:center;
font-weight:bold;
/*/*/border:1px solid #000000;/* */
}
.box{
border:1px solid #C0C0C0;
Width=250px;
}
.margin{
margin-right:50px;
}

和HTML：

<div align="center"><button class="button">Napisz do nas</button></div>
        <div>
<form runat="server">
                <div align="center" class="margin">
                <table border="0" width="350">
                    <tr>
                        <td valign="top"><font face="Verdana" size="2">Imi&#281; i Nazwisko:</font></td>
                        <td height="20">   <asp:TextBox  class="box" runat="server" Height="21px" ID="txtName"></asp:TextBox>
                        <br>
                        <asp:RequiredFieldValidator ID = "req1" ControlToValidate = "txtFrom" Runat = "server" ErrorMessage = "Prosz&#281; poda&#263; Imi&#281; i Nazwisko "></asp:RequiredFieldValidator></td>
                    </tr>
                    <tr>
                        <td valign="top"><font face="Verdana" size="2">E-mail:</font></td>
                        <td height="24"> <asp:TextBox class="box" runat="server" Height="22px" ID="txtFrom"></asp:TextBox>
                        <br>
                        <asp:RegularExpressionValidator ID = "reg1" ControlToValidate = "txtFrom" Runat = "server" ErrorMessage = "Invalid Email" ValidationExpression="\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"></asp:RegularExpressionValidator>&nbsp;<asp:RequiredFieldValidator ID = "req3" ControlToValidate = "txtFrom" Runat = "server" ErrorMessage = "Nieprawid&#322;owy Email" ></asp:RequiredFieldValidator></td>
                    </tr>
                    <tr>
                        <td valign="top"><font face="Verdana" size="2">Wiadomo&#347;&#263;:</font></td>
                        <td  height="80"> <asp:TextBox class="box" runat="server" Height="80px" TextMode="Multiline" rows="4" ID="txtComments"></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td valign="top"></td>
                        <td colspan="2" valign="top" height="10" width="20">
            <asp:Button class="button1" Runat = server ID = btnSubmit OnClick = btnSubmit_Click Text = "Wy&#347;lij"></asp:Button>
                        &nbsp;<input  type = "reset" class="clean" runat = "server" value = "Wyczy&#347;&#263;"></td>
                    </tr>
                    </table>
                </div>
</form>
                </div>

Answer 1

您可以在网页中使用Normalize.css。这会有所帮助。

将以下内容添加到您的头脑中

<link rel="stylesheet" src="//normalize-css.googlecode.com/svn/trunk/normalize.css" />

Answer 2

如何将按钮放入桌子？像这样：

<table border="0" width="350">
    <tr>
        <td></td>
        <td><button class="button">Napisz do nas</button></td>
    </tr>
    <tr>
        <td valign="top"><font face="Verdana" size="2">Imi&#281; i Nazwisko:</font></td>
        <td height="20" align="left">  <asp:TextBox  class="box" runat="server" Height="21px" ID="txtName"></asp:TextBox>
                    <br>
                    <asp:RequiredFieldValidator ID = "req1" ControlToValidate = "txtFrom" Runat = "server" ErrorMessage = "Prosz&#281; poda&#263; Imi&#281; i Nazwisko "></asp:RequiredFieldValidator></td>
    </tr>
<!-- ... -->
</table>

另一种可能性，给左列固定宽度，按钮左边有一个宽度。

页面显示在大多数浏览器中都是正确的，但不是Safari

2 个答案: