IE11浏览器中SVG图标定位异常问题求助

Let’s break down why your logo layout is breaking in IE11 and fix it step by step:

Key Issues Causing the Problem #

• Incorrect CSS Selector: Your CSS uses .logo svg to target the graphic, but your HTML uses an <img class="svg"> tag. This selector won’t match, so none of your SVG styles are applying reliably (even modern browsers might fall back to defaults).
• Missing Position Context: The <h2> uses position: absolute but its parent .logo doesn’t have position: relative. IE11 handles absolute positioning reference elements more strictly than modern browsers, so the h2 might be positioning relative to a higher-level container instead of the logo.
• Inline Element + Absolute Positioning Conflict: IE11 has quirky behavior when combining display: inline with position: absolute on elements.
• SVG Styling Limitation with <img>: Using <img> to embed SVG means you can’t style internal elements like <path> with external CSS (this doesn’t work reliably in any browser, let alone IE11).

Step-by-Step Fixes #

1. Replace <img> with Inline SVG #

To style the SVG’s <path> and get consistent behavior, move the SVG code directly into your HTML:

<div class="logo"> 
  <a href="#"> 
    <svg class="svg" viewBox="0 0 54 54"> <!-- Use your SVG's actual viewBox dimensions -->
      <path d="YOUR_SVG_PATH_HERE" /> <!-- Paste your logo.svg's path code here -->
    </svg> 
    <h2>Muffin-Welt.de</h2> 
  </a> 
</div>

2. Update CSS for IE11 Compatibility #

Fix selectors, add positioning context, and adjust layout properties:

.logo {
  position: relative; /* Ensures absolute-positioned h2 uses this as its reference */
  white-space: nowrap; /* Prevents the h2 from wrapping below the SVG */
}

.logo a {
  display: inline-block; /* Gives the anchor a solid layout box to contain children */
}

.logo h2 {
  font-size: 33px;
  left: 80px;
  display: inline-block; /* Replaces inline to avoid IE11 absolute positioning quirks */
  color: white;
  position: absolute;
  top: 50%; /* Vertically center the text relative to the SVG */
  transform: translateY(-50%);
  margin: 0; /* Remove default h2 margin that might throw off alignment */
}

.logo .svg {
  width: 54px;
  display: inline-block;
  vertical-align: middle; /* Aligns SVG vertically with text */
}

.logo .svg path {
  fill: #fff;
  transition: all ease 1s;
  /* Remove margin-top here — path elements don't respect margin in IE11 */
}

3. Optional: IE11-Specific Fallback #

If you still see minor alignment issues, add a conditional style for IE11:

/* IE11-specific adjustment for vertical alignment */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .logo h2 {
    top: 12px; /* Tweak this value if needed for IE11 */
    transform: none; /* IE11 has partial transform support, fall back to static top value */
  }
}

Why This Works #

• Adding position: relative to .logo locks the h2’s position to the logo container.
• Inline SVG lets your CSS properly target and animate the <path> element.
• Using inline-block and vertical alignment fixes IE11’s weird handling of inline elements and absolute positioning.
• The top: 50% + transform: translateY(-50%) pattern ensures consistent vertical centering across browsers, with an IE11 fallback if needed.

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