2012-01-18 2 views
0

나는 Asp.Net 사용자 만들기 마법사를 사용하여 모든 브라우저에서 동일하게 보이도록 레이블을 수정하고 정렬하려고합니다.다른 브라우저와의 CSS 호환성

이제 문제는 크롬에서 잘 보이지만 IE9와 Firefox에서는 동일하게 보입니다. 여기 검사에 들어갈 때

enter image description here

는이 두 가지 요소가 position:absolute 및 Z-지수, 즉이 오른쪽에있는 건물 .style 요소를 보여줍니다 :

이는 크롬의 모습입니다이되는 모든 것을 스크랩합니다. 여기

enter image description here

는 IE와 파이어 폭스의 문제 온 : 그것은 파이어 폭스와 IE에 관해서

enter image description here

는 무시 모든 것을 : 나는 아래의 속성을 줄이 enter image description here

내 CSS 파일에 아래에 나와있는 것처럼하지만이 크롬에만 작동하므로 IE 및 Firefox뿐만 아니라 어떻게 변경할 것이라고 알고 싶습니다

.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

는 이유 무엇이 도움이 될 수 있습니다 개별 시도에서 컨트롤을 배치 먼저 테이블 구조를 만들 사업부 내에서 컨트롤 을 배치 할 사업부를 do.Create 할 수있는 작업은 다음과 같습니다 절대 '? 필요가 없어야합니다. 이것을 빼내면 모든 브라우저의 레이블과 일치시켜야합니다. – Deadlykipper

+0

절대 위치는 참으로 두 요소의 붕괴를 초래합니다 (실제로, 왜?). DOM은 위치가 절대적이기 때문에 두 항목의 너비를 고려하지 않습니다. 따라서 사용하는 테이블 형식 구조가 축소됩니다. – Rickjaah

+0

@ Deadlykipper- 나는 절대적으로 element.style 속성 자체를 절대적으로 보여주고 있습니다. 그렇습니다. 그쪽은 스타일 시트에서 position : relative! important.But로 언급 한 것처럼했는데, 이것은 firefox로 무시됩니다. IE – coder

답변

-2

왜 종종 도움이 될 격자 구조에 컨트롤을 정렬 테이블을 사용하려고 당신을 해달라고. 여기에 당신이 다음이`위치를 사용하는

+0

위의 화면에서 볼 수 있듯이 - 그는 테이블을 사용하고 있습니다. 무엇이 잘못 되었나요? – giker

+0

@ User1155418- 내 테이블을 사용하는 이유는 실제로 필자가 사용하기에 더 구체적으로 컨트롤을 확장해야하기 때문입니다. – coder

+0

@DotNetter - jsfiddle.net에 코드를 붙여 넣으십시오 - 도움이 더 쉬울 것입니다 – giker

관련 문제