Стилизация кнопки ссылки с использованием CSS в разных браузерах - PullRequest
Новая
       10

Стилизация кнопки ссылки с использованием CSS в разных браузерах

1 голос
/ 25 марта 2009

ОБНОВЛЕНИЕ № 2: Я решил почти все свои проблемы, за исключением одного основного. С той же структурой и CSS IE7 / 6 отображает каждый a со 100% шириной своего контейнера. Мне нужно, чтобы этого не случилось. Кроме того, все остальное в порядке. Может ли кто-нибудь просветить меня?

ОБНОВЛЕНИЕ: должно выглядеть так

alt text

У меня есть следующая HTML-страница (подробно ниже). Он просто отображает 2 стилизованные кнопки из ссылок. Моя проблема заключается в том, что IE6 & 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>

Ответы [ 5 ]

2 голосов
/ 25 марта 2009

РЕДАКТИРОВАТЬ: Теперь, когда я понимаю ваше изображение:

Просто сделайте ваши <a> элементы блочными элементами с помощью display: block и поместите в них какой-то промежуток, чтобы удерживать значок. Или вы могли бы сделать все это изображение ...

0 голосов
/ 25 марта 2009

Я на самом деле запутался. Как они должны выглядеть? Если вы не дадите нам знать, что собираетесь делать, решить проблему очень сложно.

0 голосов
/ 25 марта 2009

Редактировать: Я на самом деле не получаю правильную визуализацию в IE8, к чему я обращаюсь ниже:

Для начала вы должны поместить элементы <a> внутри элементов, а не наоборот. Элементы блочного уровня не должны существовать внутри встроенных элементов. например, 

  <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 может спуститься оттуда.

0 голосов
/ 25 марта 2009

Всего один совет для ресурса по проблеме кнопки / ссылки в целом:

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

0 голосов
/ 25 марта 2009

IE6 / 7 не поддерживает display: inline-block, IE6 не поддерживает дочерний (parent > child) селектор. Так что вы, вероятно, должны рассмотреть эти моменты в вашем CSS ...

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...