Chrome和IE10中的CSS对齐问题

Question

There're two issues I'm facing while I'm trying to make this page look the same way in all browsers.

1. I am using a fieldset tag <filedset></fieldset> for the login option. It works fine with the latest version of Chrome and Firefox. However, the output is little different in IE10.

Here's the screenshot from Chrome.

As you can see it's aligned with the top image.

Here's how it looks like in IE10

The ending line of the <fieldset> tag is stopping in the middle of the page. How can I resolve this issue? I want the line to go all the way to the right same way as in Chrome.

Here is the html

            <fieldset>
                <legend><h3>Login to portal</h3></legend>
                </br>
                <strong>Username:</strong>&nbsp;&nbsp; <input type="text" id="text1"> 
                <br><br> 
                <strong>Password:</strong>&nbsp;&nbsp; <input type="password" id="text2"> 
                <br> <br />
                <asp:Button ID="btnLogin" runat="server" Height="41px" Text="Login" Width="74px" /> <br> 
            </fieldset>

Here's the CSS:

fieldset {
border: 1px solid #cecfd5;
border-radius: 6px;
padding: 24px 30px;
}

The second issue I have is aligning the two textboxes and the button. As you can see the two text boxes are almost aligned but not perfectly and the button is just different position in every browser. I want to align the button to the right side of the ending textboxes.

Here's the CSS I use for textboxes:

<style> 
#text1 
{ 
border: 2px solid rgb(173, 204, 204); 
height: 31px; 
width: 223px; 
box-shadow: 0px 0px 27px rgb(204, 204, 204) inset; 
transition:500ms all ease; 
padding:3px 3px 3px 3px; 
font-size: 20px;
color: #7D7764; 
} 

#text1:hover, #text1:focus 
 { 
 width:260px; 
 transition:500ms all ease; 
 background:url(images/email-icon.png) no-repeat right; 
 background-size:25px 25px; 
 background-position:96% 62%; 
 padding:3px 32px 3px 3px; 
 } 
 #text2
 { 
 border: 2px solid rgb(173, 204, 204); 
 height: 31px; 
 width: 223px; 
 box-shadow: 0px 0px 27px rgb(204, 204, 204) inset; 
 transition:500ms all ease; 
 padding:3px 3px 3px 3px; 
 font-size: 20px;
 color: #7D7764; 
  } 

  text2:hover, #text2:focus 
 { 
 width:260px; 
 transition:500ms all ease; 
 background:url(images/modify-key-icon.png) no-repeat right; 
 background-size:25px 25px; 
 background-position:96% 62%; 
 padding:3px 32px 3px 3px; 
 } 
 </style>

Any suggestions on how I can resolve these two issues?

Thanks

UDPATE: I have resolved the second issue. Still have issues with the first problem.

Answer 1

From the screenshot, it looks as though the <fieldset> is having display: block; applied in chrome and FF, which is what causes it to expand to the maximum width available in the parent. The IE screenshot, however, looks as though it is having display: inline applied to it, which causes it to behave like a <span> , taking only as much space as is necessary to contain its child elements.

That's just how it looks, however. I can't give a definitive answer without knowing what the style is that's actually being applied to the element. You can figure this out by pressing the f12 button while in IE10, that brings up their equivalent of debug tools. You'll want to look under the "computed" tab next to "styles" to see what the final style is that is being applied to the element.