锚点在 IE7 上分成两部分
顶部：IE8
底部：IE7
如何修复 IE7，使其不会将我的锚分成两部分？我知道 display:block 和 float:left 可以解决这个问题，但我宁愿让它内联。这样，我就可以在任何任意放置的锚按钮的左侧和右侧都有文本。
#launchChrome {
font-weight: bold;
text-decoration: none;
text-shadow: 0 1px 0 rgba(255,255,255,1);
background: #eee;
background: -moz-linear-gradient(center top, #fff, #cfd5e3);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #cfd5e3));
border: 1px solid;
border-color: #ccc #ccc #999 #ccc;
-moz-border-radius: 0.4em;
-webkit-border-radius: 0.4em;
text-shadow: 0 1px 0 rgba(255,255,255,0.7);
color: #666;
font-size: 1.4em;
padding: 0.2em 0.6em;
margin: 0 0 0 1em;
-moz-box-shadow: 0 0.1em 0.1em rgba(0,0,0,0.1);
-webkit-box-shadow: 0 0.1em 0.1em rgba(0,0,0,0.1);
}
<a id="launchChrome" href="javascript:void(0)" onclick="launch()">
<img src="<?=base_url()?>images/spacer.gif" class="spriteChannel googleChromeSmall">
Launch Chrome
</a>
Top: IE8
Bottom: IE7
How do you fix IE7 so it doesn't split my anchor into two pieces? I know display:block and float:left would solve this, but I'd rather have it be inline. This way, I can have text both to the left and right of any arbitrarily placed anchor button.
#launchChrome {
font-weight: bold;
text-decoration: none;
text-shadow: 0 1px 0 rgba(255,255,255,1);
background: #eee;
background: -moz-linear-gradient(center top, #fff, #cfd5e3);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #cfd5e3));
border: 1px solid;
border-color: #ccc #ccc #999 #ccc;
-moz-border-radius: 0.4em;
-webkit-border-radius: 0.4em;
text-shadow: 0 1px 0 rgba(255,255,255,0.7);
color: #666;
font-size: 1.4em;
padding: 0.2em 0.6em;
margin: 0 0 0 1em;
-moz-box-shadow: 0 0.1em 0.1em rgba(0,0,0,0.1);
-webkit-box-shadow: 0 0.1em 0.1em rgba(0,0,0,0.1);
}
<a id="launchChrome" href="javascript:void(0)" onclick="launch()">
<img src="<?=base_url()?>images/spacer.gif" class="spriteChannel googleChromeSmall">
Launch Chrome
</a>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
我使用 display:inline-block 来修复它。
I used display:inline-block to fix it.
为什么一开始就使用图像标签？
使用不重复的背景图像并在链接上设置左填充，以便文本覆盖图像。
Why even use an image tag to begin with?
Use a non repeating background image and set a padding-left on the link so the text does cover the image.
首先关闭你的img标签
![]()
其次 - 尝试将
zoom:1添加到#launchChrome- 我在 IE7 中没有遇到完全相同的渲染问题，但它修复了 IE6/7 中的外观。那应该触发 hasLayout。First of all close your img tag
<img />.Second - try adding
zoom:1to#launchChrome- I'm not having the exact same render problem in IE7 but it fixed it's look in both IE6/7. That shoud trigger hasLayout.