Question

更新＃2：我已解决了几乎所有问题，而不是一个主要问题。使用相同的结构和CSS IE7 / 6显示每个具有100％宽度的容器。我需要这个没有发生。除此之外，其他一切都很好。谁能开导我？

更新：应该看起来像这样

我有以下html页面（详见下文）。它只是从链接呈现2个样式的按钮。我的问题是IE6＆amp; 7呈现的方式与Firefox，Safari，IE8和Chrome不同，它们都能正确呈现。

我一直在撞墙，试图让它在IE6 / 7中运行一天。谁能提出关于我做错的建议？

由于

<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>

Answer 1

编辑：现在我了解你的形象：

只需使用display：block创建<a>元素块元素，并在其中放置某种范围以保存图标。或者你可以把整个事情变成一个形象......

Answer 2

IE6 / 7不支持display: inline-block，IE6不支持子（parent > child）选择器。所以你可能应该研究一下css中的那些点......

Answer 3

编辑：我实际上在IE8中没有得到正确的渲染，这是我在下面提到的：

首先，您应该将<a>元素放在元素内而不是相反。块级元素不应该存在于内联元素中。 e.g。

  <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>

这解决了我的定位，但随后造型风格也随之减少。我没有修改CSS以纠正它，但它应该是直截了当的。其次，你有很多类来处理一个简单的问题。可以说，你应该只需要外部div中的一个类来识别内部发生的事情，然后你的CSS可以从那里下降。

Answer 4

一般来说，按钮/链接问题的资源只有一个提示：

http://mezzoblue.com/archives/2008/09/17/anchor_butto/

Answer 5

我其实很困惑。他们应该怎么样？如果您不告诉我们您打算做什么，则很难解决问题。

使用CSS浏览器为链接按钮设置样式

5 个答案: