Member Avatar for scandalist

I have just recently been getting into the web development scene and I have discovered that just because code works in one browser does not mean it will work in another. I have noticed that my code seems to render just fine in chrome, opera and firefox but somehow IE consistently has problems. Inquisitive research suggested that this is because IE does not follow web standards that the w3c has set forth upon the development community. So my question is this: Is it possible to develop code that works well with <b>all</b> browsers? Or maybe there is a way to specify code specifically for IE and have all other browsers ignore said snippets?

It is quite frustrating as you all know to have an awesome web layout only to find it practically destroyed by the likes of Internet Explorer.

Thank you to those who can shed some light on this subject.

-scandalist

  • 3 Contributors
  • 2 Replies
  • 132 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by Netcode

Dani AI

Generated

Answering : cross-browser compatibility is achievable with a repeatable workflow rather than chasing browser-by-browser hacks. A reliable baseline forces standards mode and reduces surprises:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Site</title>
</head>

On the CSS side, normalize the starting point, adopt a consistent box model, and use feature queries for modern layouts. Automation avoids human error: let a tool handle vendor prefixes and target support by checking feature tables. Useful resources: normalize.css, Can I use, and an autoprefixer in the build step.

*, *::before, *::after { box-sizing: border-box; }

@supports (display: grid) {
  .layout { display: grid; }
}

For JavaScript, prefer feature detection and polyfills over browser sniffing. Modernizr or small runtime checks can gate enhancements or load polyfills on demand (example: feature-detect fetch, then load a polyfill if absent).

if ('fetch' in window) {
  fetch('/data').then(...);
} else {
  var s = document.createElement('script');
  s.src = 'https://polyfill.io/v3/polyfill.min.js?features=fetch';
  document.head.appendChild(s);
}

Testing and scope control matter. Building on 's point about which IE versions to support, pick a realistic baseline and stick to it. As noted, rendering varies — reduce variance with normalization, automated visual checks, and cross-browser services such as BrowserStack or local VMs. Avoid brittle CSS hacks and browser sniffing; treat hacks as last-resort workarounds and document them in a compatibility checklist.

Recommended Answers

All 2 Replies

Member Avatar for twiss

First of all, think of which versions of IE you want to support; IE6 and IE8 are a whole different story.
Second, all the different quirks in IE are quite well documented, along with workarounds. You might want to look them up.
Third, as for javascript (I know that's not really your question but IMHO javascript in IE6 is a bigger problem than IE6's layout engine) using a library might help you. Not to say that you should always use a library (and certainly don't start jQuery-ing without having started with JS) but it might as well make your life easier :)
As a last resort, there are .

Member Avatar for Netcode

I have noticed that my code seems to render just fine in chrome, opera and firefox but somehow IE consistently has problems.

Yes, CSS varies on different browsers so the rendering may also vary.

Inquisitive research suggested that this is because IE does not follow web standards that the w3c has set forth upon the development community.

Fortunately, the new IE9 has the compatibility feature to support web applications built for older browsers.

Edited by Netcode because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.