Совместимость CSS с различными браузерами - PullRequest
0 голосов
/ 18 января 2012

У меня есть мастер создания пользователей Asp.Net, и я пытаюсь изменить и расположить его ярлыки так, чтобы они выглядели одинаково в каждом браузере.

Теперь проблема в том, что в Chrome он выглядит хорошо, но в IE9 и Firefox он выглядит одинаково.

Вот как это выглядит в chrome:

enter image description here

Когда я начинаю осматривать здесь, он показывает свойство element .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 голосов
/ 18 января 2012

Почему вы не пытаетесь использовать таблицы для выравнивания элементов управления в структуре сетки, что часто может помочь.вот что вы можете сделать. Создайте элемент div, в котором вы хотите разместить элементы управления внутри элемента div, сначала создайте табличную структуру, а затем поместите элемент управления в отдельную попытку. Это может помочь

...