CSS与不同浏览器的兼容性

时间:2012-01-18 11:15:03

标签: asp.net css styles element

我有一个Asp.Net创建用户向导,并试图在每个浏览器中修改和排列其标签。

现在问题是它在chrome中看起来很好但在IE9和Firefox中看起来相同。

这就是它在chrome中的表现:

enter image description here

当我在这里进行检查时,它会在右侧显示元素.style属性,它有两个元素,即position:absolute和Z-index:2,这使得一切都废弃。

enter image description here

以下是IE和firefox的问题:

enter image description here

说到firefox和IE,它忽略了一切: enter image description here

我已经在我的css文件中提供了以下属性,如下所示,但这仅适用于chrome,所以我想知道如何为IE和Firefox改变它

.signtbl
{
z-index:2;
position:relative !important;
}

这是我控制的整个代码:

<asp:CreateUserWizard ID="CreateUserWizard1" runat="server" 
  DisableCreatedUser="True" MailDefinition-BodyFileName="~/EmailTemplates/NewAccountTemplate.htm" MailDefinition-From="noreply@imgaid.com" LoginCreatedUser="False" MailDefinition-IsBodyHtml="True" MailDefinition-Priority="High" MailDefinition-Subject="Pending Activation">
  <ContinueButtonStyle BorderStyle="None" CssClass="btn big" Font-Size="12px"/>
  <CreateUserButtonStyle CssClass="btn big" Height="30px" 
            Width="125px" BorderStyle="None" Font-Size="12px" />
      <MailDefinition BodyFileName="~/EmailTemplates/NewAccountTemplate.htm" 
          From="noreply@xyz.com" IsBodyHtml="True" Priority="High" 
          Subject="Pending Activation">
      </MailDefinition>
      <WizardSteps>
          <asp:CreateUserWizardStep ID="CreateUserWizardStep1" runat="server">
              <ContentTemplate>
                  <table>
                      <tr>
                          <td align="right">
                              <asp:Label ID="UserNameLabel" runat="server" AssociatedControlID="UserName" CssClass="signtbl">User Name:</asp:Label>
                          </td>
                          <td>
                              <asp:TextBox ID="UserName" runat="server" BorderStyle="Solid" BorderWidth="1px" BorderColor="#0099CC" BackColor="#FAFFBD" AutoCompleteType="Disabled"></asp:TextBox>
                              <asp:RequiredFieldValidator ID="UserNameRequired" runat="server" 
                                  ControlToValidate="UserName" ErrorMessage="User Name is required." 
                                  ToolTip="User Name is required." ValidationGroup="CreateUserWizard1" 
                                  CssClass="signupvalidators" ForeColor="Red">*</asp:RequiredFieldValidator>
                                 <div id="divUsernameAvailability" runat="server"></div>
                          </td>
                      </tr>
                      <tr>
                          <td align="right">
                              <asp:Label ID="PasswordLabel" runat="server" AssociatedControlID="Password" CssClass="signtbl">Password:</asp:Label>
                          </td>
                          <td>
                              <asp:TextBox ID="Password" runat="server" TextMode="Password" BorderStyle="Solid" BorderWidth="1px" BorderColor="#0099CC" BackColor="#FAFFBD"></asp:TextBox>
                              <asp:RequiredFieldValidator ID="PasswordRequired" runat="server" 
                                  ControlToValidate="Password" ErrorMessage="Password is required." 
                                  ToolTip="Password is required." ValidationGroup="CreateUserWizard1" 
                                  CssClass="signupvalidators" ForeColor="Red">*</asp:RequiredFieldValidator>
                          </td>
                      </tr>
                      <tr>
                          <td align="right">
                              <asp:Label ID="ConfirmPasswordLabel" runat="server" 
                                  AssociatedControlID="ConfirmPassword" CssClass="signtbl">Confirm Password:</asp:Label>
                          </td>
                          <td>
                              <asp:TextBox ID="ConfirmPassword" runat="server" TextMode="Password" BorderStyle="Solid" BorderWidth="1px" BorderColor="#0099CC" BackColor="#FAFFBD"></asp:TextBox>
                              <asp:RequiredFieldValidator ID="ConfirmPasswordRequired" runat="server" 
                                  ControlToValidate="ConfirmPassword" 
                                  ErrorMessage="Confirm Password is required." 
                                  ToolTip="Confirm Password is required." 
                                  ValidationGroup="CreateUserWizard1" CssClass="signupvalidators" ForeColor="Red">*</asp:RequiredFieldValidator>
                          </td>
                      </tr>
                      <tr>
                          <td align="right">
                              <asp:Label ID="EmailLabel" runat="server" AssociatedControlID="Email" CssClass="signtbl">E-mail:</asp:Label>
                          </td>
                          <td>
                              <asp:TextBox ID="Email" runat="server" BorderStyle="Solid" BorderWidth="1px" BorderColor="#0099CC" BackColor="#FAFFBD"></asp:TextBox>
                              <asp:RequiredFieldValidator ID="EmailRequired" runat="server" 
                                  ControlToValidate="Email" ErrorMessage="E-mail is required." 
                                  ToolTip="E-mail is required." ValidationGroup="CreateUserWizard1" 
                                  CssClass="signupvalidators" ForeColor="Red">*</asp:RequiredFieldValidator>
                                  <div id="divEmailAvailability" runat="server"></div>
                          </td>
                      </tr>
                      <%--<tr>
                          <td align="right">
                              <asp:Label ID="QuestionLabel" runat="server" AssociatedControlID="Question" CssClass="signtbl">Security Question:</asp:Label>
                          </td>
                          <td>
                              <asp:TextBox ID="Question" runat="server" BorderStyle="Solid" BorderWidth="1px" BorderColor="#0099CC" BackColor="#FAFFBD"></asp:TextBox>
                              <asp:RequiredFieldValidator ID="QuestionRequired" runat="server" 
                                  ControlToValidate="Question" ErrorMessage="Security question is required." 
                                  ToolTip="Security question is required." 
                                  ValidationGroup="CreateUserWizard1" CssClass="signupvalidators" ForeColor="Red">*</asp:RequiredFieldValidator>
                          </td>
                      </tr>
                      <tr>
                          <td align="right">
                              <asp:Label ID="AnswerLabel" runat="server" AssociatedControlID="Answer" CssClass="signtbl">Security Answer:</asp:Label>
                          </td>
                          <td>
                              <asp:TextBox ID="Answer" runat="server" BorderStyle="Solid" BorderWidth="1px" BorderColor="#0099CC" BackColor="#FAFFBD"></asp:TextBox>
                              <asp:RequiredFieldValidator ID="AnswerRequired" runat="server" 
                                  ControlToValidate="Answer" ErrorMessage="Security answer is required." 
                                  ToolTip="Security answer is required." ValidationGroup="CreateUserWizard1" 
                                  CssClass="signupvalidators" ForeColor="Red">*</asp:RequiredFieldValidator>
                          </td>
                      </tr>--%>
                  <tr>
                  <td align="center" colspan="2">
                      <asp:RegularExpressionValidator ID="UsernameLength" runat="server" 
                          ErrorMessage="Username should be minimum 5-10 characters." 
                          ControlToValidate="UserName" Display="Dynamic" ForeColor="Red" 
                          ValidationExpression="^[\s\S]{5,10}$" ValidationGroup="CreateUserWizard1"></asp:RegularExpressionValidator>
                  </td>
                  </tr>
                      <tr>
                          <td align="center" colspan="2">
                              <asp:CompareValidator ID="PasswordCompare" runat="server" 
                                  ControlToCompare="Password" ControlToValidate="ConfirmPassword" 
                                  Display="Dynamic" 
                                  ErrorMessage="The Password and Confirmation Password must match." 
                                  ValidationGroup="CreateUserWizard1" ForeColor="Red"></asp:CompareValidator>
                          </td>
                      </tr>
                      <tr>
                          <td align="center" colspan="2" style="color:Red;">
                              <asp:Literal ID="ErrorMessage" runat="server" EnableViewState="False"></asp:Literal>
                          </td>
                      </tr>
                      <tr>
                      <td  align="center" colspan="2">
                       <asp:RegularExpressionValidator ID="PasswordLength" runat="server"  Display="Dynamic"
                                  ErrorMessage="Password length minimum: 7. Non-alphanumeric characters required: 1" 
                                  ControlToValidate="Password" ValidationExpression="(?=^.{7,51}$)([A-Za-z]{1})([A-Za-z0-9!@#$%_\^\&amp;\*\-\.\?]{5,49})$" 
                              ForeColor="Red" ValidationGroup="CreateUserWizard1"></asp:RegularExpressionValidator>
                      </td>
                      </tr>
                      <tr>
                       <td  align="center" colspan="2">
                          <asp:RegularExpressionValidator ID="EmailValidator" runat="server" Display="Dynamic"
                                ControlToValidate="Email"  ErrorMessage="Please enter a valid e-mail address." ValidationExpression="^[\w-]+(\.[\w-]+)*@([a-z0-9-]+(\.[a-z0-9-]+)*?\.[a-z]{2,6}|(\d{1,3}\.){3}\d{1,3})(:\d{4})?$"  ForeColor="Red" ValidationGroup="CreateUserWizard1"></asp:RegularExpressionValidator>
                      </td> 
                      </tr>
                  </table>

                  <%-- <asp:UpdateProgress ID="UpdateProgressUserDetails" runat="server" DisplayAfter="0">
                            <ProgressTemplate>
                                <div style="position: absolute; top: 215px; left:140px;">
                                    <img src="img/Loader.gif" alt="loading" /><br />
                                </div>
                            </ProgressTemplate>
                        </asp:UpdateProgress>--%>
              </ContentTemplate>
          </asp:CreateUserWizardStep>
          <asp:CompleteWizardStep ID="CompleteWizardStep1" runat="server">
              <ContentTemplate>
                  <table>
                      <tr>
                          <td align="center" colspan="2">
                              Complete</td>
                      </tr>
                      <tr>
                          <td>
                              Your account has been successfully created.</td>
                      </tr>
                      <%--<tr>
                          <td align="right" colspan="2">
                              <asp:Button ID="ContinueButton" runat="server" BorderStyle="None" 
                                  CausesValidation="False" CommandName="Continue" CssClass="btn big" 
                                  Font-Size="12px" Text="Continue" ValidationGroup="CreateUserWizard1" />
                          </td>
                      </tr>--%>
                  </table>
              </ContentTemplate>
          </asp:CompleteWizardStep>
      </WizardSteps>
  </asp:CreateUserWizard>

1 个答案:

答案 0 :(得分:-2)

为什么不尝试使用表格来控制网格结构中可能经常有用的控件。 这是你可以做的。创建一个你想要放置控件的div 在div中首先创建一个表格结构然后将控制放在个体中  尝试可能会有所帮助