Random Spacing Issues
• Phantom whitespace –
spaces and lines (IE7
• Why this is bad: Not
Usually impacted layout
quite noticeably, but
only in Internet
• More on this problem:
Commonly seen in
Whitespace Issues - Explained
• The height attribute tells IE that the DIV has a layout.
• Because of the layout, the box gets a minimum height equal to the line-height.
• With line-height not explicitly set, it defaults to the font-size for the box.
• Internet Explorer gives HTML elements a layout flag that can be checked
through the read-only hasLayout property.
• Related Reading: hasLayout property (Internet Explorer)
Elements where hasLayout is true
• Tables – including rows and cells
• Horizontal rule (hr)
• Input elements
• Framesets & frames
CSS Properties that Trigger
• display: inline-block
• height & width
• float: left & right
• position: absolute
• -ms-writing-mode: tb-rl
Workarounds for the layout bug
• Find a way to get hasLayout computed to false – hard to do though because
once IE sets this true, it can’t be changed back.
• Try to avoid using elements or CSS properties that trigger hasLayout.
• Set the line-height to 0.
IE Margins & Padding Issues
• Why this is bad: Nobody chose to implement the standard the same way;
Internet Explorer was the furthest away.
• Internet Explorer interpreted the box model in its own way, causing margins and
padding to display much differently.
Fixed: Internet Explorer Box Model
• Internet Explorer 6 introduced “standards-compliant” mode.
• Internet Explorer for the Mac was not affected by this bug.
Quirks Mode Headaches
• Allowed browsers to render HTML and CSS even if it didn’t conform to
• Introduced all sorts of bugs
• Allows us to recreate the IE box model bug
• Images and other inline content vertically aligns differently
• Font style inheritance in tables did not always happen
• Solved by:
Proper DOCTYPE declaration
User Agent Sniffing
• Why this is bad: Can easily be spoofed. Not always
Making it easier to develop for Internet Explorer
• Code with Standards - http://www.modern.ie/en-us/cross-browser-best-practices
• BrowserStack testing trial
• Scan a Site
• Virtualization – test versions of IE with pre-built VMs
Modern.IE – Cross Browser Best
• 20 tips for building modern sites while supporting old versions of IE by Dave
Methvin (jQuery) and Rey Bango (Microsoft)
• Words of Wisdom include…
Sites don’t need to render the same across all browsers.
Test in multiple browsers while developing. Consider using a tool such as
Understand the backward-compatibility limits of HTML5 tags.
Fully prefix vendor-specific CSS properties to future-proof them.
Solve compatibility problems with valid CSS rules, not CSS parser hacks.
Use a solid template as a base
• HTML5 Boilerplate is an example where rules have been added to work across
multiple browsers and downgrades gracefully for older browsers.
Target stable standards
• Experimental standards are just that – subject to change.
• Stable standards = stable site = happier end users
Avoid Quirks Mode
• Use a standard DOCTYPE.
• When in doubt, use the simplest of
Test in Multiple Browsers
• Do this while developing to ensure cross-
• BrowserStack can provide an environment for
testing multiple browsers. See Modern.IE for
the latest deals they may have with
• Take advantage of modern tooling in the
browsers when debugging issues.
• If working with older browsers, look for plugins
for the modern tooling equivalent – such as
Firebug for Firefox.
• Good rule of thumb: current version and the
most recent prior version
• CSS in the head of HTML to fetch as
early as possible
the page to be rendered and appear to
be loaded before scripts are fully loaded.
• Avoid !important
• Be familiar with the cascade rules
More than just class and id selectors
Understand relationship, tag, and attribute selectors
• Avoid CSS hacks (such as the _ or the *tag IE hacks)
Use version-specific classes
Feature Detection, instead of Browser
• Just say NO to User Agent sniffing
• Modernizr is recommended easiest way for feature detection.
Modern.IE - Virtualization
• Virtual machines available with Internet Explorer on various operating systems,
targeting various hypervisors
• Hypervisor support includes:
VirtualBox for Linux
VirtualBox, VMWare Fusion, and Parallels for Mac
Hyper-V, Virtual PC, VirtualBox, VMWare Player for Windows
• IE versions include:
IE6 on Windows XP
IE7 on Vista
IE8 on Windows XP or Windows 77
IE9 on Windows 7
IE10 on Windows 7 & Windows 8
IE11 Developer Preview on Windows 7 & Windows 8.1
• Related Resource: Rey Bango – Making Internet Explorer Testing Easier with new IE
F12 Developer Tools
• Internet Explorer’s built-in developer tools
• New look-n-feel in Internet Explorer 11 Preview
Easier & faster workflow
UI Responsiveness tool
Screen & GPS emulation
Meaningful memory analysis
Timeline of overall usage
Orphaned elements where memory can be reclaimed
makes suggestions on how to improve your site.
• Developed during IE9
• Designed to help migrate to IE9 and above
• User Guide:
• Can also use Fiddler to inject Compat Inspector through a snippet in Fiddler
Verifying Issues in Compat Inspector
• Verifiers can emulate legacy behavior
• Check the Verify box and then refresh the page.
• Multiple issues can be verified at once.
Debugging Issues in Compat Inspector
• Check the Debug checkbox.
• Start up the F12 Developer Tools.
• Switch to the Script tab.
• Click “Start debugging”.
• Detects the presence of common libraries and notes the versions in use
• Provides the ability to verify functionality with the latest version of the detected
Putting Tested Code Live
• Remove Compat Inspector script reference before setting pages live.
• Use Fiddler to avoid using the script reference in the code in the first place.
• Compat Inspector is only meant for a dev environment.
Internet Explorer 10 Guide for
F12 Developer Tools
Windows 8 integration
Internet Explorer 10 Developer Guide
• Topics include:
Debugging Web Workers in F12 Developer Tools
Filter effects for SVGs
Windows 8 integration
Internet Explorer 10 Developers Guide
– Link Preview Example
• Extends Windows 8 share experience
• Requirements for a link preview:
Title for the webpage – no longer than 160 characters
Description – no longer than 160 characters
Thumbnail – URL no longer than 2048 characters
<meta name=“title” content=“Cleveland Tech Events” /> or <title>Cleveland Tech
<meta name=“description” content=“What’s Happening in Cleveland’s tech community” />
<link rel=“image_src” href=“clevtechpreview.jpg” /> or
<meta name=“image” content=“clevtechpreview.jpg” />
<meta name=“thumbnail” content=“clevtechthumb.jpg” />
<meta property=“og:image” content=“clevtechthumb.jpg” />
• Convened by W3C, community-driven site with the goal to be the authoritative
source for web development documentation
• Supporters include:
WebPlatform.org - Tutorials
• Tutorials for implementing web technology
• Tutorials on specific topics
Graphics (2D & 3D)
Offline & Storage
WebPlatform.org - Documents
• Documents include:
General Web Concepts
• Twitter: @IEDevChat
• Internet Explorer Developer Guides
• Internet Explorer Compatibility Cookbooks