Chrome和IE10中的CSS对齐问题

Question

当我试图使该页面在所有浏览器中看起来都一样时，我面临两个问题。

1. 我在登录选项中使用了<filedset></fieldset>标记<filedset></fieldset> 。 它可以与最新版本的Chrome和Firefox正常运行。 但是，IE10中的输出几乎没有什么不同。

这是Chrome的屏幕截图。

如您所见，它与顶部图像对齐。

这是IE10中的样子

<fieldset>标记的结尾行在页面中间停止。 我该如何解决这个问题？ 我希望生产线一直沿用与Chrome中相同的方式。

这是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>

这是CSS：

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

我遇到的第二个问题是对齐两个文本框和按钮。 如您所见，这两个文本框几乎对齐但并不完美，并且按钮在每个浏览器中的位置都不同。 我想将按钮对齐到末尾文本框的右侧。

这是我用于文本框的CSS：

<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>

关于如何解决这两个问题有什么建议吗？

谢谢

UDPATE：我已经解决了第二个问题。 仍然有第一个问题的问题。

Answer 1

从屏幕快照中，看起来<fieldset>正在display: block; 应用在chrome和FF中，这是使其扩展到父级中可用的最大宽度的原因。 但是，IE屏幕快照看起来好像已经display: inline应用于它，这使其表现得像<span> ，仅占用包含其子元素所需的空间。

但是，这就是它的外观。 在不知道实际应用于元素的样式的情况下，我无法给出明确的答案。 您可以通过在IE10中按f12按钮来解决此问题，这将调出它们相当于调试工具的功能。 您需要查看“样式”旁边的“计算”选项卡下，以查看最终应用于元素的样式。