asp.net - Unable to get IE10 to match Chrome and Firefox display -
i have asp.net 4.0 application i'm trying balance 3 browsers. content lines should firefox , chrome, when displaying in ie10 text elements become substantially larger , no longer flow within layout correctly. oddly enough, ie8 displays correctly, ie10 in compatibility mode, using
<meta http-equiv="x-ua-compatible" content="ie=emulateie8"/> or <meta http-equiv="x-ua-compatible" content="ie8"/> has no effect (using first element in head.)
there's hotfix asp.net 4.0 adds user agent ie10 (without ie10 displayed in basic mode), seems have been replaced windows update seems have been applied (the hotfix installation blocked result.) issue described here, asp.net website looks different on ie10 .
at point i'm not sure else causing issue. here's picture of difference, chrome appearance above ie10 give comparison:
http://i.imgur.com/qrds3ws.png
both browsers in zoom 100% mode, ie10 making larger.
here code , css displayed segment:
<!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> here relevant 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; } any suggestions on should looking @ next, or ideas solution?
emulating version (ie=emulateie8) tells browser use doctype determine how render content. pages without doctype rendered in quirks mode. using html5 doctype, though, switches browsers content standards mode. and why code fails!
in cases line job :
<meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1" /> when internet explorer comes across line change engine being used first chrome frame, if plugin installed, , edge (the highest supported document mode of browser).
any website running on intranet run in compatibility mode , website on microsoft’s compatibility list change well.
if sill issues, better check if inside css may cause browser-incoherence!
edit (added css hints)
i'm gonna list few things go wrong in css in order reproduce unexpected result! i'm not able test those, unfortunately i'm not gonna tell specific property change make work right out of box! i'll write down few things based on images attached question!
what seems different @ least eyes, font-weight, alignment , font-size on buttons!
hence using ordered-lists , buttons i'm 99% sure solve 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 does, great... keep on reading in order prevent things happen again!
if doesn't :
some browsers when rendering in quirks mode recreate legacy behavior tables (but apply other elements well) not inherit shown here!
every css property not overriding in file potentially have different default value on each given browser! there commom practice use css reset templates eric meyer’s, html5 doctor, yui, , many others (here's little collection)! reset crucial css properties leaving equal ground build upon!
based on previous point, stating
font-size:smallorfont-weight: normalinterpreted in different ways, without property-reset!smallnot cross-browser font sizing unit!
here's little hint of try in order make work, not of proprieties needed, of course, hope 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; }
Comments
Post a Comment