無法獲取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; 
}

什麼我應該看未來，或想法的任何建議解？

來源

2013-05-02 Ben

有無你嘗試添加視口元和設置初始比例？不知道這是否會有所幫助，但也許值得一試。 – 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; 
}

來源

2013-05-02 16:58:03 Ivo

不幸的是，該行沒有效果。頁面使用的所有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顯示

回答

相關問題