在IE8中,chrome下拉列表的宽度与dropbox相同,而在IE9中,下拉列表的宽度不同.如何才能解决这个问题
本文关键字:下拉列表 问题 解决 相同 chrome IE8 dropbox IE9 而在 | 更新日期: 2023-09-27 18:08:27
.inpTxtE
{
font: 11px verdana;
background-color:#FFFFFF;
border-right: #7F9DB9 1px solid;
border-top: #7F9DB9 1px solid;
border-left: #7F9DB9 1px solid;
border-bottom: #7F9DB9 1px solid;
width:70%;
}
但是当宽度给定为72%时,它与IE9中的其他宽度相同。但是当它在chrome中打开时,下拉框的宽度大于其他文本框。
<asp:DropDownList ID="ddlStatus" runat="server" CssClass="inpTxtE" >
</asp:DropDownList>
这是我使用的代码。我将如何解决这个问题?
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
input, select {
width: 200px;
border: 1px solid #000;
padding: 0;
margin: 0;
height: 22px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
input {
text-indent: 4px;
}
</style>
</head>
<body>
<input type="text" value="ABC"><br>
<select>
<option>1234567</option>
<option>121212121212121</option>
<option>12121212121212121212</option>
</select>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7;IE=10; IE=9;" />
<style type="text/css">
input, select {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
</style>
</head>
<body>
<input type="text" value="ABC"><br>
<select>
<option>1234567</option>
<option>121212121212121</option>
<option>12121212121212121212</option>
</select>
</body>
</html>