Html 跨浏览器使用CSS设置链接按钮的样式
更新#2：除了一个主要问题外，我几乎解决了所有问题。使用相同的结构和CSS IE7/6，每个a都以其容器的100%宽度显示。我希望这一切不会发生。除此之外，其他一切都很好。谁能启发我 更新：应该是这样的 我有下面的html页面（详情如下）。它只是从链接中呈现两个样式化的按钮。我的问题是IE6和IE7的渲染方式不同于Firefox、Safari、IE8和Chrome，它们都能正确渲染 一天来，我一直在努力让它在IE6/7中工作。有人能就我做错了什么提出建议吗 谢谢Html 跨浏览器使用CSS设置链接按钮的样式,html,css,Html,Css,更新#2：除了一个主要问题外，我几乎解决了所有问题。使用相同的结构和CSS IE7/6，每个a都以其容器的100%宽度显示。我希望这一切不会发生。除此之外，其他一切都很好。谁能启发我 更新：应该是这样的 我有下面的html页面（详情如下）。它只是从链接中呈现两个样式化的按钮。我的问题是IE6和IE7的渲染方式不同于Firefox、Safari、IE8和Chrome，它们都能正确渲染 一天来，我一直在努力让它在IE6/7中工作。有人能就我做错了什么提出建议吗 谢谢 <html>
<html>
<head>
<style>
.niw-button {
background: #1f81c0 url(niw-btn-gradient-normal.png) repeat-x;
border: none;
color: #fff;
display: inline-block;
font-weight: bold;
margin-right: 6px;
min-width: 95px;
padding: 2px;
text-decoration: none;
}
.niw-button:hover {
background: #5e698f url(niw-btn-gradient-hover.png) repeat-x;
}
.niw-button > .niw-button-contents {
border: 1px solid #73b1da;
}
.niw-button > .niw-button-contents:hover {
border: 1px solid #99a1bc;
}
.niw-button .niw-button-icon {
background-position: center;
background-repeat: no-repeat;
float: right;
height: 25px;
width: 27px;
}
.niw-button .niw-button-text {
height: 25px;
line-height: 1.5em;
padding-left: 5px;
padding-right: 27px;
text-align: center;
text-transform: uppercase;
}
.right-align {
float:right;
}
.niw-icon-cancel {
background-image: url(niwater_cancelIcon.png);
}
</style>
</head>
<body>
<a class="niw-button right-align" href="#">
<div class="niw-button-contents">
<div class="niw-button-icon niw-icon-cancel"></div>
<div class="niw-button-text">Cancel</div>
</div>
</a>
<a class="niw-button" href="#">
<div class="niw-button-contents">
<div class="niw-button-icon niw-icon-cancel"></div>
<div class="niw-button-text">Cancel</div>
</div>
</a>
</body>
</html>
.niw按钮{
背景：#1f81c0url（niw-btn-gradient-normal.png）repeat-x；
边界：无；
颜色：#fff；
显示：内联块；
字体大小：粗体；
右边距：6px；
最小宽度：95px；
填充：2px；
文字装饰：无；
}
.niw按钮：悬停{
背景：#5e698f url（niw btn gradient hover.png）repeat-x；
}
.niw按钮>.niw按钮内容{
边框：1px实心#73b1da；
}
.niw按钮>.niw按钮内容：悬停{
边框：1px实心#99a1bc；
}
.niw按钮.niw按钮图标{
背景位置：中心；
背景重复：无重复；
浮动：对；
高度：25px；
宽度：27px；
}
.niw按钮.niw按钮文本{
高度：25px；
线高：1.5em；
左侧填充：5px；
右边填充：27px；
文本对齐：居中；
文本转换：大写；
}
.右对齐{
浮动：对；
}
.niw图标取消{
背景图片：url（niwater_cancelIcon.png）；
}
IE6/7不支持显示：内联块
，IE6不支持子（父项>子项
）选择器。因此，您可能应该查看css中的这些点…编辑：我实际上没有在IE8中获得正确的渲染，这就是我在下面所述的内容：
首先，您应该将
这为我修复了定位，但随后在样式方面出现了损失。我还没有修改CSS来纠正这一点，但它应该很简单。其次，您有大量的类来处理一个简单的问题。可以说，您应该只需要外部div中的一个类来识别内部发生了什么，然后您的CSS就可以从那里下降。对于按钮/链接问题的资源，通常只有一个提示：
实际上我自己也很困惑。他们看起来怎么样？如果您不让我们知道您打算做什么，则很难解决问题。编辑：现在我了解了您的图像：
只需使用display:block使您的
元素阻塞元素，并在元素内部放置某种跨度以保持图标。或者你可以把整个事情做成一个图像……父>子问题解决了好几个问题。完全忘了，谢谢。但主要问题仍然存在。然后整个按钮无法单击。这稍微破坏了解决方案。如果样式设置正确，则可能会出现这种情况-显示图标的内部div是不必要的，因为这种样式可以应用于链接本身，四周都有适当的填充，a元素上没有边距。对于内边框，可以在链接文本上使用span。我尝试过这种方法，但它似乎会在IE6/7中引起同样数量的问题，实际上我不能这样做。主容器（在ym情况下为a）具有渐变背景）。然后，内容需要设置一个图标作为背景-它不能是一个一个设置为阻止。是的，它可以。用渐变背景构建a。在其内部放置一个跨度，以图标为背景。就这样。然后你就失去了内部边界，这是一个要求。我通过调整所有按钮的宽度来解决这个问题。。。应为客户所接受。（手指交叉）我仍然不明白为什么你不能使用鼠标上方变化的简单平面图像。因为我们有大量的按钮，每个按钮都有不同的图标和文本，每个按钮都有不同的宽度。我尝试了静态方法，如果每个按钮（普通和悬停）必须有2个图像，这就像回到90年代早期的HTML一样
<div class="niw-button-contents">
<div class="niw-button-icon niw-icon-cancel"></div>
<div class="niw-button-text"><a class="niw-button right-align" href="#">Cancel</a></div>
</div>
<div class="niw-button-contents">
<div class="niw-button-icon niw-icon-cancel"></div>
<div class="niw-button-text"><a class="niw-button" href="#">Cancel</a></div>
</div>