2

我有一个 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;
}

关于我接下来应该看什么或解决方案的想法有什么建议吗?

4

1 回答 1

4

Emulating the version (IE=EmulateIE8) tells the browser to use the doctype to determine how to render content. Pages without a doctype will be rendered in quirks mode. Using the html5 doctype, though, switches almost any browsers to content standards mode. And this is why your code probably fails!

In most cases this line does the job :

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

When Internet Explorer comes across this line it will change the engine that is being used to first Chrome Frame, if the plugin is installed, and then to Edge (the highest supported document mode of the browser).

Any website running on an Intranet will run in Compatibility Mode and any website on Microsoft’s Compatibility List will change to it as well.

If you sill get issues, you better check if something inside your css may cause this browser-incoherence!


Edit (added some css hints)

I'm just gonna list a few things that could go wrong in your css in order to reproduce the unexpected result! I'm not able to test those, so unfortunately I'm not gonna tell you any specific property to change to make it work right out of the box! I'll just write down a few things based on the images you attached to the question!

What seems different at least to my eyes, is the font-weight, alignment and eventually the font-size on buttons!

Hence you are using ordered-lists and buttons I'm 99% sure this will solve your particular problem straight away (but hey it's internet explorer, nobody ever knows)!

ol li { text-align:left }

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

If it does, great... but keep on reading in order to prevent things like that to happen again!

If it doesn't :

  • Some browsers when rendering in quirks mode recreate some legacy behavior where tables (but this could apply to other elements as well) do not inherit properly as shown here!

  • Every css property you are not overriding in your file could potentially have a different default value on each given browser! There is a commom practice to use css reset templates like Eric Meyer’s, HTML5 Doctor, YUI, and many others (here's a little collection)! All they do is to reset some crucial css properties leaving an equal ground to build upon!

  • Based on my previous point, stating font-size:small or font-weight: normal could be interpreted in different ways, without any property-reset! small is not a cross-browser font sizing unit!

Here's a little hint of what you could try in order to make it work, not all of the proprieties are needed, of course, but i hope you figure them out trying :

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-02T16:58:03.837 回答