【发布时间】：2013-04-26 21:48:27
【问题描述】：
我有一个 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 website looks different on 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;
}
关于我接下来应该看什么的任何建议，或解决方案的想法？
【问题讨论】：
-
您是否尝试过添加视口元数据并设置初始比例？ 不知道这是否会有所帮助，但也许值得一试。
-
@tomca32 我怀疑问题是特定于移动设备的，但如果是这样，则视口元标记将无济于事，因为 IE 不支持它。它使用
@viewport规则：dev.opera.com/articles/view/… 和timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design -
@tomca32 cimmanon 是正确的。这不是移动问题（无论如何它都可以在 iPad 上正确显示。）出于好奇，我确实尝试过，但没有效果（建议使用视口版本。）
标签： asp.net css cross-browser