HTML5内网站点适配IE/Edge：图片项目符号间距问题求助

Hey Ryan, let’s tackle this tricky list-style-image spacing issue you’re facing while upgrading your internal sites to HTML5. Matching legacy compatibility view renderings in modern browsers always comes with quirky CSS hurdles, so here are some targeted fixes to get your Excel bullet aligned properly with text, no more unwanted shifts or misalignment:

1. Reset Default List Padding (Critical for Standard Mode) #

First, your base UL/OL styles are missing explicit padding-left, which is key because list-style-image positioning behaves differently between quirks mode and standard HTML5 mode. Browsers use the padding area to place the bullet, so adding a precise value will fix the starting position:

UL, OL {
  margin-top: .5em;
  margin-bottom: .5em;
  padding-left: 1.5em; /* Adjust this to match your legacy view's indent */
}

UL UL, UL OL, OL UL, OL OL {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 1.2em; /* Nested lists need a smaller indent */
}

2. Ditch list-style-image for background-image (More Control) #

The list-style-image property has inconsistent alignment behavior in IE and Edge—this is likely why your text is shifting down. Replacing it with a background image gives you pixel-perfect control over spacing and alignment:

li.BulletExcel {
  list-style: none !important; /* Remove default bullet */
  padding-left: 20px; /* Space for your 16x16 icon + 4px gap */
  background: url('/common/images/bullets/icon_excel2013_16x16.png') left center no-repeat;
  vertical-align: middle;
  margin-left: 0; /* Reset your earlier margin to avoid extra indent */
}

li.BulletExcel li {
  list-style: none;
  padding-left: 0; /* Remove padding for nested items */
  background: none;
}

This method ensures the icon stays vertically centered with text across IE and Edge, and you can tweak padding-left to exactly match the gap in your desired legacy view.

3. If You Must Keep list-style-image #

If you need to stick with list-style-image for some reason, fix the text shift and spacing with these adjustments:

li.BulletExcel {
  list-style-image: url('/common/images/bullets/icon_excel2013_16x16.png') !important;
  list-style-position: outside;
  padding-left: 6px; /* Controls gap between bullet and text */
  margin-left: 0; /* Remove extra margin pushing the list right */
  line-height: 16px; /* Match your icon's height to align text */
  vertical-align: baseline; /* Fixes IE's text downward shift */
}

Quick Testing Tip #

Always test in both IE’s compatibility view and Edge side-by-side with your legacy screenshot. Use browser dev tools (F12) to tweak padding/margin values in real time—this will help you nail the exact spacing faster.

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