html - Chrome 和 IE10 中的 CSS 对齐问题

Question

当我试图让这个页面在所有浏览器中看起来都一样时，我遇到了两个问题。

1. 我正在使用字段集标签 <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 按钮来解决这个问题，这会调出等效的调试工具。您需要查看“样式”旁边的“计算”选项卡下，以查看应用于元素的最终样式是什么。