2012-01-18 164 views
0

我有一个Asp.Net创建用户向导,并试图修改和安排其标签在每个浏览器中看起来都一样。与不同浏览器的CSS兼容

现在问题是它看起来不错,但在IE9和Firefox中看起来相同。

这是它的外观镀铬:

enter image description here

当我进入检查此处显示.style属性的元素有两个要素,即position:absolute和Z-指数权:2,使一切都废弃。

enter image description here

这里来与IE和Firefox的问题:

enter image description here

当涉及到Firefox和IE它忽视了一切: enter image description here

我给下面的性质在我的CSS文件如下所示,但这只适用于铬,所以我想知道我将如何改变它的IE浏览器以及火狐

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

这是我对我的控制整个代码:

<asp:CreateUserWizard ID="CreateUserWizard1" runat="server" 
    DisableCreatedUser="True" MailDefinition-BodyFileName="~/EmailTemplates/NewAccountTemplate.htm" MailDefinition-From="[email protected]" 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="[email protected]" 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})([[email protected]#$%_\^\&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

什么是你之所以用'位置的div:绝对'?应该没有必要。如果你把它输出,输入应该与所有浏览器中的标签对齐。 – Deadlykipper 2012-01-18 11:21:08

+0

绝对位置确实造成了这两个元素的崩溃(的确,为什么?)。 DOM不会考虑这两个项目的宽度,因为它们绝对是位置。因此,您使用的表格结构会崩溃。 – Rickjaah 2012-01-18 11:28:10

+0

@ Deadlykipper-我没有使用任何位置:绝对的element.style属性本身显示为绝对和是我在我的样式表中提到它的位置:relative!important.But这是忽略与Firefox和IE – coder 2012-01-18 11:48:44

回答

-2

你为什么不尝试使用表格来调整您的电网结构控制,可能经常帮助。 这里就是你可以do.Create,你要放置控件 的DIV中首先创建一个表结构,然后放置在单独的 尝试控制可能是这将有助于

+0

正如我可以在上面的屏幕上看到的 - 他使用表格,什么是错的。 – giker 2012-01-18 11:23:38

+0

@ User1155418-我的表格的原因实际上是我需要将我的控件扩展为更具体的使用它。 – coder 2012-01-18 11:49:41

+0

@DotNetter - 将你的代码粘贴到jsfiddle.net - 它会更容易帮助 – giker 2012-01-18 11:52:13