English 中文(简体)
使用CSS在不同浏览器中样式化链接按钮
原标题:
  • 时间:2009-03-25 12:30:49
  •  标签:

更新#2:我几乎解决了我所有的问题,除了一个主要的问题。使用相同的结构和CSS,IE7/6显示每个a都有其容器的100%宽度。我不希望这种情况发生。除此之外,一切都还好。有人能启迪我吗?

更新:应该是这样的

alt text

我有以下HTML页面(详细说明如下)。 它只是从链接呈现2个样式化按钮。 我的问题是IE6和7呈现它与Firefox,Safari,IE8和Chrome不同,所有这些都正确呈现它。

我已经把头撞向墙壁一整天了,试图在IE6 / 7中使其工作。有人能提供一些建议吗?

谢谢 (xiè xiè)

<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>
最佳回答
问题回答

IE6/7不支持display:inline-block,IE6不支持子级(parent>child)选择器。因此,在您的css中可能应该关注这些要点...

编辑:实际上,在我下面所提到的IE8中,我没有获得正确的渲染。

首先,您应该将<a>元素放在<p>元素内,而不是相反。 块级元素不应该存在于内联元素中。 例如:

  <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来纠正这个问题,但应该很容易。其次,你有很多类来处理简单的问题。可以说你只需要在外部

标签中使用一个类来识别发生了什么,然后你的CSS可以从那里开始进行下降。

我自己其实也很困惑。它们应该长什么样?如果你不告诉我们你打算做什么,修复问题就很困难。





相关问题