{"id":1182,"date":"2014-03-22T10:12:23","date_gmt":"2014-03-22T20:12:23","guid":{"rendered":"http:\/\/mymonkeydo.com\/?p=1182"},"modified":"2014-03-22T10:12:23","modified_gmt":"2014-03-22T20:12:23","slug":"careful-with-supporting-all-versions-of-ie-8","status":"publish","type":"post","link":"https:\/\/mymonkeydo.com\/careful-with-supporting-all-versions-of-ie-8\/","title":{"rendered":"Careful with supporting all versions of IE 8"},"content":{"rendered":"<h2>Problem<\/h2>\n<p>Internet Explorer 8 is still mildly popular and so probably needs to be accommodated for on websites. \u00a0However, like different versions of Chrome and Firefox, IE8 also has different versions. \u00a0There are about 6 different versions of IE8 in the wild. \u00a02 of which I have run into personally. \u00a01 version, on Windows 7 uses the IE8 standards document to show websites while another version runs on Windows XP to show IE7 standards document. \u00a0Until 2008, <a href=\"http:\/\/www.456bereastreet.com\/archive\/200803\/surprise_of_the_year_ie8_will_use_standards_mode_by_default\/\">IE8 used to default to render using IE7<\/a>! \u00a0What the hell? \u00a0Anyway, the real problem is IE7 does not support a lot of CSS that we use today since, you know, it&#8217;s over 10 years old.<\/p>\n<h2>Solutions<\/h2>\n<p>A good starting point is to use the IE-edge meta tag within the head:<\/p>\n<pre><code>&lt;meta http-equiv=\"x-ua-compatible\" content=\"IE=Edge\"\/&gt; <\/code><\/pre>\n<p>Another good starting point is to use the <a href=\"http:\/\/modernizr.com\">modernizr.js<\/a> script.<\/p>\n<p>IE8 using IE7 does not support box-sizing. \u00a0Using modernizr and some handy dandy javascript, we can adjust the dimensions of elements.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nModernizr.addTest(&quot;boxsizing&quot;, function() {\nreturn Modernizr.testAllProps(&quot;boxSizing&quot;) &amp;&amp; (document.documentMode === undefined || document.documentMode &gt; 7);\n});\njQuery(document).ready(function($) {\nif( $('html').hasClass('no-boxsizing') ) {\n$('.no-boxsizing, .no-boxsizing *').each(function(){\nvar fullW = $(this).outerWidth(),\nactualW = $(this).width(),\nwDiff = fullW - actualW,\nnewW = actualW - wDiff;\n\n$(this).css('width',newW);\n\nvar fullH = $(this).outerHeight(),\nactualH = $(this).height(),\nhDiff = fullH - actualH,\nnewH = actualH - hDiff;\n\n$(this).css('height',newH);\n\n});\n}\n});\n\n<\/pre>\n<p>IE8 using IE7 has no table-cell<\/p>\n<p>One solution is to use<\/p>\n<p>*float:left;<\/p>\n<p>Or, as one stackoverflow person found, use !ie7.. sorry, forgot to save the link. \u00a0but anything with !ie7 will only apply to ie7 and below. \u00a0(the ie7 part can actually be any non-valid text like !ieisold)<\/p>\n<p>float:left !ie7;<\/p>\n<p>To vertically align images, try this: \u00a0<a href=\"http:\/\/stackoverflow.com\/questions\/10998614\/ie7-vertically-align-middle-not-working\">http:\/\/stackoverflow.com\/questions\/10998614\/ie7-vertically-align-middle-not-working<\/a><\/p>\n<p>To test your work out on multiple versions of IE without you having to actually have Windows installed:<\/p>\n<p><a href=\"http:\/\/www.browserstack.com\/\">http:\/\/www.browserstack.com\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[2],"tags":[17,31,34],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Careful with supporting all versions of IE 8 - My Monkey Do<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/mymonkeydo.com\/careful-with-supporting-all-versions-of-ie-8\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Careful with supporting all versions of IE 8 - My Monkey Do\" \/>\n<meta property=\"og:url\" content=\"https:\/\/mymonkeydo.com\/careful-with-supporting-all-versions-of-ie-8\/\" \/>\n<meta property=\"og:site_name\" content=\"My Monkey Do\" \/>\n<meta property=\"article:published_time\" content=\"2014-03-22T20:12:23+00:00\" \/>\n<meta name=\"author\" content=\"Webhead\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Webhead\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/mymonkeydo.com\/careful-with-supporting-all-versions-of-ie-8\/\",\"url\":\"https:\/\/mymonkeydo.com\/careful-with-supporting-all-versions-of-ie-8\/\",\"name\":\"Careful with supporting all versions of IE 8 - My Monkey Do\",\"isPartOf\":{\"@id\":\"https:\/\/mymonkeydo.com\/#website\"},\"datePublished\":\"2014-03-22T20:12:23+00:00\",\"dateModified\":\"2014-03-22T20:12:23+00:00\",\"author\":{\"@id\":\"https:\/\/mymonkeydo.com\/#\/schema\/person\/b16fc650a8c182faaac896bab099b829\"},\"breadcrumb\":{\"@id\":\"https:\/\/mymonkeydo.com\/careful-with-supporting-all-versions-of-ie-8\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/mymonkeydo.com\/careful-with-supporting-all-versions-of-ie-8\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/mymonkeydo.com\/careful-with-supporting-all-versions-of-ie-8\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/mymonkeydo.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Careful with supporting all versions of IE 8\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/mymonkeydo.com\/#website\",\"url\":\"https:\/\/mymonkeydo.com\/\",\"name\":\"My Monkey Do\",\"description\":\"A Log of Coding Solutions\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/mymonkeydo.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/mymonkeydo.com\/#\/schema\/person\/b16fc650a8c182faaac896bab099b829\",\"name\":\"Webhead\",\"url\":\"https:\/\/mymonkeydo.com\/author\/corey\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Careful with supporting all versions of IE 8 - My Monkey Do","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/mymonkeydo.com\/careful-with-supporting-all-versions-of-ie-8\/","og_locale":"en_US","og_type":"article","og_title":"Careful with supporting all versions of IE 8 - My Monkey Do","og_url":"https:\/\/mymonkeydo.com\/careful-with-supporting-all-versions-of-ie-8\/","og_site_name":"My Monkey Do","article_published_time":"2014-03-22T20:12:23+00:00","author":"Webhead","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Webhead","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/mymonkeydo.com\/careful-with-supporting-all-versions-of-ie-8\/","url":"https:\/\/mymonkeydo.com\/careful-with-supporting-all-versions-of-ie-8\/","name":"Careful with supporting all versions of IE 8 - My Monkey Do","isPartOf":{"@id":"https:\/\/mymonkeydo.com\/#website"},"datePublished":"2014-03-22T20:12:23+00:00","dateModified":"2014-03-22T20:12:23+00:00","author":{"@id":"https:\/\/mymonkeydo.com\/#\/schema\/person\/b16fc650a8c182faaac896bab099b829"},"breadcrumb":{"@id":"https:\/\/mymonkeydo.com\/careful-with-supporting-all-versions-of-ie-8\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/mymonkeydo.com\/careful-with-supporting-all-versions-of-ie-8\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/mymonkeydo.com\/careful-with-supporting-all-versions-of-ie-8\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/mymonkeydo.com\/"},{"@type":"ListItem","position":2,"name":"Careful with supporting all versions of IE 8"}]},{"@type":"WebSite","@id":"https:\/\/mymonkeydo.com\/#website","url":"https:\/\/mymonkeydo.com\/","name":"My Monkey Do","description":"A Log of Coding Solutions","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/mymonkeydo.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/mymonkeydo.com\/#\/schema\/person\/b16fc650a8c182faaac896bab099b829","name":"Webhead","url":"https:\/\/mymonkeydo.com\/author\/corey\/"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/mymonkeydo.com\/wp-json\/wp\/v2\/posts\/1182"}],"collection":[{"href":"https:\/\/mymonkeydo.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mymonkeydo.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mymonkeydo.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mymonkeydo.com\/wp-json\/wp\/v2\/comments?post=1182"}],"version-history":[{"count":0,"href":"https:\/\/mymonkeydo.com\/wp-json\/wp\/v2\/posts\/1182\/revisions"}],"wp:attachment":[{"href":"https:\/\/mymonkeydo.com\/wp-json\/wp\/v2\/media?parent=1182"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mymonkeydo.com\/wp-json\/wp\/v2\/categories?post=1182"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mymonkeydo.com\/wp-json\/wp\/v2\/tags?post=1182"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}