li标签的position-absolute与relative案例应用

在构建购物车中的发货地址选择界面时，我们遇到了一个有趣的技术挑战。当使用UL标签展示多个收货地址时，每个地址后都有一个“修改地址”功能，该功能位于li标签的右侧。为了实现这一布局，我们使用了CSS中的position:absolute属性，将“修改地址”链接移至右侧。在此之前，我们需要在li标签上设置position:relative属性。

以下是HTML结构示例：

```html

• 寄送至：

  广东省中山市三乡镇鸦岗村兴隆制衣厂（rabbit收）13560351111

  修改地址

```

在CSS样式中，我们为地址列表和列表项设置了相应的样式。当鼠标悬停在列表项上或选中时，会改变边框颜色和背景。“修改地址”链接和文本的颜色也会发生变化。以下是CSS代码示例：

```css

ul.addr_list { margin: 20px 0; }

ul.addr_list li {

border: 1px solid fff;

padding-left: 30px;

margin: 2px 0;

position: relative;

zoom: 1; / 增加此属性以解决特定浏览器的渲染问题 /

}

/ 鼠标悬停或选中状态 /

ul.addr_list li:hover, ul.addr_list li.on {

border: 1px solid B18A69;

background: E7D8C7 url(../images/deal/addr_icon.jpg) no-repeat 10px 3px;

}

ul.addr_list li span, ul.addr_list li a { color: fff; } / 设置文本和链接颜色 /

ul.addr_list li a { position: absolute; right: 10px; top: 0; } / 将“修改地址”移至右侧 /

/ 鼠标悬停或选中时的文本和链接颜色变化 /

ul.addr_list li:hover span, ul.addr_list li:hover a, ul.addr_list li.on span, ul.addr_list li.on a { color: 966233; }

```

在Chrome、Firefox等浏览器中，效果良好。但在搜狗和360浏览器中，我们发现li的上边框不见了。通过增加zoom:1属性，我们解决了这个问题。尽管具体的原因并不清晰，但它似乎提高了li元素的层级，从而确保了在所有浏览器中的一致表现。增加zoom属性后的效果如你所描述的那样。我们的目标是提供一个用户友好的界面，确保在所有主流浏览器中的一致体验。