2012-01-18 165 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