求助：基于w3.css的销售询单表单在IE浏览器显示异常

Hey Joe, let's dig into why your sales enquiry form works great in Chrome/Firefox but falls apart in IE—plus how to fix it. The main culprits boil down to HTML structure issues and IE's limited support for modern CSS patterns, even with W3.css.

Key Reasons for the IE Display Issues #

1. Missing <head> Tag (Critical!) #

Your HTML doesn’t wrap metadata (meta tags, title, stylesheets) in a <head> element. Modern browsers are forgiving about this, but IE is strict—when it encounters this invalid structure, it switches to Quirks Mode (a compatibility mode that mimics old IE behavior). This mode breaks most modern CSS layouts, including W3.css's grid-based classes like w3-cell-row and w3-cell.

2. W3.css Compatibility Gaps in IE #

While W3.css claims to support IE11+, its grid and flexbox-based layout classes can behave unpredictably in IE, especially if the browser is in Quirks Mode. IE has partial or buggy support for modern CSS features that W3.css relies on, leading to misaligned form fields and broken spacing.

3. JavaScript Syntax Error #

Your submit button’s onclick attribute is missing parentheses:

onclick="OnClickButtonSendEnquiry"

IE is less tolerant of this syntax than modern browsers. While this won’t break display directly, it will prevent your button from working as intended once the layout is fixed.

4. Quirks Mode Impact on Custom CSS #

Your custom .button class uses border-radius and other styles that work in standard mode, but in Quirks Mode, IE ignores or misrenders these properties, making your button look inconsistent.

Fixes to Get the Form Working in IE #

Step 1: Fix the HTML Structure #

Wrap all metadata in a <head> tag to force IE into Standard Mode. Here’s the corrected core structure:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Certsure Sales Enquiry Form</title>
    <link rel="stylesheet" type="text/css" href="https://www.w3schools.com/w3css/4/w3.css">
    <style>
        body { padding: 30px; background-color: #262626; }
        .button { border-radius: 12px; background-color: #c50736; color: white; padding: 10px; text-align: center; text-decoration: none; display: inline-block; font-size: 15px; border:none; border-radius: 4px; cursor: pointer; }
        .submit-container { padding:20px; }
    </style>
</head>
<body>
    <!-- Your existing form content here -->
</body>
</html>

Step 2: Fix the JavaScript Onclick #

Add parentheses to the function call to ensure IE recognizes it properly:

<button class="button w3-hover-black" name="Send Enquiry" id="Send Enquiry" onclick="OnClickButtonSendEnquiry()">Send enquiry</button>

Step 3: Add IE-Specific Fallbacks (If Needed) #

If you still see layout issues after fixing the structure, try these tweaks:

• For IE11, add a polyfill like flexibility.js to improve flexbox support (W3.css handles this mostly, but it can help with edge cases).
• Replace w3-cell-row/w3-cell with a table-based layout as a fallback for older IE versions (if you need to support IE9 or below):

  <table class="w3-light-gray w3-center" style="width:100%;">
      <tr>
          <td class="w3-third">Schemes</td>
          <td class="w3-third">Training</td>
          <td class="w3-third">Direct</td>
      </tr>
      <tr>
          <td class="w3-quarter">Name<br/><input type="text" name="Name" class="w3-input w3-border w3-round"></td>
          <td class="w3-quarter">Phone<br/><input type="text" name="Phone" class="w3-input w3-border w3-round"></td>
          <td class="w3-quarter">Email<br/><input type="text" name="Email" class="w3-input w3-border w3-round"></td>
          <td class="w3-quarter">Company Name<br/><input type="text" name="Company Name" class="w3-input w3-border w3-round"></td>
      </tr>
  </table>
  

Step 4: Verify IE's Document Mode #

Open IE's Developer Tools (F12), go to the Emulation tab, and ensure the document mode is set to Edge (IE11) or higher. If it’s set to "Quirks" or an older IE version, the structure fix should resolve this, but double-check to be sure.

Final Notes #

Since you’re using IE specifically for VBS integration and window customization, fixing the HTML structure is the most impactful first step. Once that’s done, the W3.css layout should render much closer to how it does in modern browsers.

内容的提问来源于stack exchange，提问作者Joe Hayes