兼容Chrome与IE10-11的Div网格：ARG游戏布局兼容问题求助

Hey there! Let's get that grid overlay working smoothly for IE10 and 11—those old browsers can be stubborn, but we've got this sorted. The core issues you're facing are:

• IE10-11 don’t support CSS Grid (your display: inline-grid and grid-template-columns rules get ignored entirely)
• IE10 doesn’t recognize pointer-events: none for HTML elements (so your grid is blocking clicks even though you set the property)

Here’s a step-by-step fix that preserves your original functionality while supporting those legacy browsers:

1. Replace CSS Grid with a Compatible Layout #

Since CSS Grid is off the table for IE10-11, we’ll use either a Flexbox fallback (cleaner for static grids) or absolute positioning + JavaScript (more reliable for dynamic updates).

Option A: Flexbox Fallback (Simpler for Static Grids) #

Update your CSS to include Flexbox rules that IE will parse, while keeping Grid for modern browsers:

.grid-container {
  position: absolute;
  left: -20px;
  width: 100%;
  height: 100%;
  padding: 10px;
  z-index: 2;
  pointer-events: none;
  touch-action: none;
  box-sizing: border-box; /* Prevents padding from breaking container width */

  /* Modern browsers: Keep your original Grid setup */
  display: inline-grid;
  grid-template-columns: repeat(20, auto); /* Shorter way to write 20 "auto" values */

  /* IE10-11 Fallback: Use Flexbox to simulate the 20-column grid */
  display: -ms-flexbox;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.grid-item {
  padding: 10px;
  height: 60px;
  width: 60px;
  font-size: 15px;
  text-align: center;
  z-index: 2;
  pointer-events: none;
  touch-action: none;
  box-sizing: border-box;

  /* IE10-11: Force each item to take 1/20 of the container width */
  -ms-flex: 0 0 calc(100% / 20);
      flex: 0 0 calc(100% / 20);
}

This will make your grid wrap into a clean 20-column layout on IE, matching your original Grid design.

Option B: Absolute Positioning + JavaScript (More Reliable for Dynamic Grids) #

If Flexbox gives you unexpected behavior, use JavaScript to manually position each grid item relative to the container. This works flawlessly in IE10-11:

First, update the container CSS to act as a positioning reference:

.grid-container {
  position: absolute;
  left: -20px;
  width: 100%;
  height: 100%;
  padding: 10px;
  z-index: 2;
  pointer-events: none;
  touch-action: none;
  position: relative; /* Required for absolute-positioned child elements */
  box-sizing: border-box;
}

.grid-item {
  padding: 10px;
  height: 60px;
  width: 60px;
  font-size: 15px;
  text-align: center;
  z-index: 2;
  pointer-events: none;
  touch-action: none;
  position: absolute; /* Let JS handle exact positioning */
  box-sizing: border-box;
}

Then add this jQuery code to calculate and set each item’s position:

$(document).ready(function() {
  const $container = $('#grid');
  const $items = $container.find('.grid-item');
  const columns = 20;
  let itemSize = $('.grid-item').outerWidth(true); // Includes padding and borders

  // Position items on page load
  positionGridItems();

  // Reposition items when the window resizes (optional but recommended)
  $(window).resize(function() {
    itemSize = $('.grid-item').outerWidth(true);
    positionGridItems();
  });

  function positionGridItems() {
    $items.each(function(index) {
      const row = Math.floor(index / columns);
      const col = index % columns;
      $(this).css({
        left: `${col * itemSize}px`,
        top: `${row * itemSize}px`
      });
    });
  }
});

2. Fix pointer-events: none for IE10 #

IE10 doesn’t support pointer-events: none for HTML elements (only SVG). To let clicks pass through your grid to the content below, add this JavaScript workaround:

// Pass click/touch events through the grid to underlying elements (IE10 fix)
$('#grid').on('click mousedown mouseup touchstart touchend', function(e) {
  e.preventDefault();
  e.stopPropagation();
  
  // Find the element directly below the grid at the event position
  const target = document.elementFromPoint(e.clientX, e.clientY);
  if (target && target !== this) {
    // Trigger the same event on the underlying element
    $(target).trigger(e.type);
  }
});

This simulates the pointer-events: none behavior by redirecting events to the element beneath the grid.

3. Test in IE10-11 #

Make sure to test in actual IE10/11 (or use Edge’s IE mode) to verify:

• The grid renders in the correct 20-column layout
• Clicks pass through the grid to elements below
• Your dynamic symbol updates work as expected

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