我有一个 asp.net 4.0 应用程序,我试图平衡所有三种浏览器。内容与 Firefox 和 Chrome 一样排列,但在 IE10 中显示时,文本元素会变得更大,并且不再在其布局中正确流动。奇怪的是,IE8 显示正确,IE10 在兼容模式下也是如此,但使用
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8"/>
or
<meta http-equiv="X-UA-Compatible" content="IE8"/>
没有效果(使用它作为头部的第一个元素。)
asp.net 4.0 有一个修补程序,它为 IE10 添加了用户代理(没有它,IE10 在基本模式下显示),但这似乎已被似乎已经应用的 Windows 更新所取代(修补程序安装被阻止结果。)这里描述了这个问题,ASP.NET 网站在 IE10 上看起来不同。
在这一点上,我不确定还有什么可能导致这个问题。下图是不同之处,用 IE10 以上的 Chrome 外观来做个对比:
http://i.imgur.com/QRDS3ws.png
两种浏览器都处于 100% 缩放模式,但 IE10 显然让一切都变大了。
以下是显示段的代码和 CSS:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Commitment Details</title>
<link href="Styles/StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form runat="server">
<asp:FormView ID="FormView1" runat="server" CellPadding="4" CellSpacing="2" EnableModelValidation="True" GridLines="Both" CssClass="Formview">
<ItemTemplate>
<label style="width:auto">Commitment Workseet For:</label>
<asp:Label ID="lblPageInfo" runat="server" CssClass="Right"/>
<ol class="header">
<li><label style="font-weight: normal;"><%# Eval("cus_name") + "#" + Eval("cmt_cusno") %></label></li>
<li><asp:Button id="btnNextPage" runat="server" Enabled="false" Style="background-image: url(images/greyrightarrow.png)" CssClass="arrows" /></li>
<li><asp:Button id="btnPrevPage" runat="server" Enabled="false" Style="background-image: url(images/greyleftarrow.png)" CssClass="arrows" /></li>
<li><asp:Button ID="btnBack" runat="server" Text="Selection List" CssClass="Right" OnClientClick="location.href='Selection.aspx'; return false;" /></li>
<li><asp:Button ID="btnHelp" runat="server" Text="Help" CssClass="Right" OnClientClick="location.href='docs/CWDocumentation.doc'; return false;" /></li>
<li><asp:Button ID="btnUpdateCmt" runat="server" Text="Update Commitment" CssClass="Center"
OnClientClick="window.open('UpdateCommitment.aspx','_blank','height=310,width=630,scrollbars=0,location=no,toolbar=0,menubar=no'); return false;" /></li>
</ol>
这是相关的CSS:
body
{
width: 768px;
text-align: center;
margin: 0 auto;
font-family:Arial;
font-size:small;
}
.SelectionView
{
text-align: left;
border-style: none;
}
.Formview
{
background-color: #CCCCCC;
border-color: #999999;
border-style: solid;
border-width: 3px;
color: black;
}
.Center
{
float: right;
margin-right:50px;
}
.Right
{
float: right;
}
.arrows
{
float: right;
width: 36px;
height: 24px;
}
.header
{
height: 2em;
background-color: #000000;
color: white;
clear:both;
margin: 0px;
padding: 0px;
list-style-position: inside;
vertical-align: middle;
}
.header li
{
display: inline;
line-height: 2em;
}
li
{
list-style: none;
}
关于我接下来应该看什么或解决方案的想法有什么建议吗?