无法获取IE10以匹配Chrome和Firefox显示

问题描述：

我有一个asp.net 4.0应用程序，我试图平衡所有三种浏览器。内容与Firefox和Chrome应有的一致，但在IE10中显示时，文本元素变得更大，并且不再正确地在其布局中流动。奇怪的是，IE8会显示正确的一样，IE10在兼容模式，但使用无法获取IE10以匹配Chrome和Firefox显示

<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 Update（修复程序安装因此被阻止）。此问题是在此描述，ASP.NET website looks different on IE10。

在这一点上，我不知道还有什么可能导致问题。区别在这里的照片，与镀铬外观上面IE10给一个比较：

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 2013-05-02 16:15:47

@ tomca32我怀疑问题是移动特定的，但如果是这样，视口元标记将不会执行任何操作，因为IE不支持它。它使用'@ viewport'规则：http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/和http://timkadlec.com/2012/10/ ie10-snap-mode-and-responsive-design/ – cimmanon 2013-05-02 16:28:08

@ tomca32 cimmanon是正确的。这不是一个移动问题（它无论如何都可以在iPad上正确显示。）我确实尝试过，只是出于好奇而没有任何效果（视口版本cimmanon建议。） – Ben 2013-05-02 16:36:42

答

模拟(IE=EmulateIE8)版本告诉浏览器使用doctype来确定如何呈现内容。没有文档类型的页面将在quirks mode中呈现。不过，使用html5文档类型，几乎可以将任何浏览器切换到content standards mode。 这就是为什么你的代码可能会失败！

在大多数情况下，这条线做工作：

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

当Internet Explorer遇到此行也将改变正在使用先Chrome Frame的发动机，如果安装了插件，然后边缘（浏览器支持的最高文档模式）。

运行在Intranet上的任何网站都将以兼容模式运行，并且微软的Compatibility List上的任何网站也将更改为它。

如果窗台遇到问题了，你最好检查你的CSS里面的东西可能会导致此浏览器的不协调！

编辑（添加一些CSS提示）

我只是要去名单的几件事情，可以去错在你的CSS为了再现意想不到的结果！我无法测试这些，所以不幸的是，我不会告诉你任何具体的属性改变，使其开箱即用！我会根据你附在问题上的图像写下几件事情！

至少对我的眼睛来说，看起来有什么不同，就是字体重量，对齐方式以及按钮上的字体大小！

因此，您正在使用有序列表和按钮我99％肯定这会立即解决您的特定问题（但嘿它是Internet Explorer，没人知道）！

ol li { text-align:left } 

button { font-size: 100%; font-weight: normal }

如果确实如此，那么......但请继续阅读，以免再次发生这种事情！怪癖模式重新渲染一些旧式行为，其中表（但是这可能适用于其他元素），如图here不正确继承时

一些浏览器：

如果没有！
您在文件中没有覆盖的每个css属性都可能在每个给定的浏览器上具有不同的默认值！有一种很常见的做法，使用像Eric Meyer’s,HTML5 Doctor,YUI和许多其他（这里有一点collection）css重置模板！他们所做的只是重置一些关键的CSS属性，留下一个平等的基础来建立！
根据我以前的观点，陈述font-size:small或font-weight: normal可以用不同的方式解释，没有任何属性重置！ small不是跨浏览器的字体大小单位！

这里是什么，你可以为了尽量使其工作，而不是所有的礼节的需要，当然是一个小提示，但我希望你计算出来尝试：

html, body { font-size: 100%; font: inherit } 

body { line-height: 1 } 

ol li { text-align:left } 

button { 
    font-size: 100%; 
    font-weight: normal; 
    margin: 0; 
    vertical-align: baseline; 
    *vertical-align: middle; 
    line-height: normal; 
    -webkit-appearance: button; 
    cursor: pointer; 
    *overflow: visible; 
}

不幸的是，该行没有效果。页面使用的所有CSS都在我的原始文章中。我没有看到任何应该有问题的东西，但我对CSS没有特别的经验，可能会错过一些东西。 – Ben 2013-05-02 18:28:33

上面的CSS并没有做到这一点 - 其中任何一个 - 但是您对字体大小方面的投入正确：小而不是跨浏览器标准。当我将字体大小设置为9pt时，显示元素在我测试的所有三种浏览器中都保持一致。我必须对重置的东西进行一些阅读，我曾经遇到过，但还没有尝试过使用它。我真的需要做一些CSS研究，因为我确实有用它。 :) – Ben 2013-05-02 20:42:19

@Ben我真的很高兴你找到了解决方案:)正如我所说，没有办法让我测试这台电脑上的代码！ – Ivo 2013-05-02 20:48:57

无法获取IE10以匹配Chrome和Firefox显示

相关推荐