IE7下在DD DT中插入a元素结果列表显示逐级向左

在IE7浏览器下，如果在一个<dt>或<dd>元素内插入一个<a>元素，那么会引起嵌套的列表逐级向左缩进的问题，即嵌套的下一层<dd>元素在外层<dt>或<dd>元素的左侧，这会让网页的排版显得混乱。

解决这个问题需要进行以下操作：

1. 给定义列表<dl>元素设置样式overflow: hidden;或zoom: 1;，可以防止出现外边距重叠的问题。
2. 给<dd>元素设置样式margin-left: 20px;，使它们的左侧产生一个20像素的外边距。
3. 给<dd>元素内的<a>元素设置样式display: inline-block;，将其变成块级元素，从而使其位置正确。

下面是两个具体的示例：

示例1：

HTML代码：

<dl>
  <dt>问题1</dt>
  <dd><a href="#">答案1</a></dd>
  <dd>补充1</dd>
  <dt>问题2</dt>
  <dd><a href="#">答案2</a></dd>
  <dd>补充2</dd>
  <dt>问题3</dt>
  <dd><a href="#">答案3</a></dd>
  <dd>补充3</dd>
</dl>

CSS代码：

dl {
  overflow: hidden;
}
dd {
  margin-left: 20px;
}
dd a {
  display: inline-block;
}

示例2：

HTML代码：

<dl>
  <dt>问题1</dt>
  <dd><a href="#">答案1</a></dd>
  <dd>补充1</dd>
  <dt>问题2</dt>
  <dd><a href="#">答案2</a></dd>
  <dd>补充2</dd>
  <dt>问题3</dt>
  <dd><a href="#">答案3</a></dd>
  <dd>补充3</dd>
</dl>

CSS代码：

dl {
  zoom: 1;
}
dd {
  margin-left: 20px;
}
dd a {
  display: inline-block;
}

参考链接：https://stackoverflow.com/questions/10705873/ie7-css-issue-with-nested-lists