Как получить кнопки и ссылки одинакового размера для одного класса? - PullRequest
Новая
       13

Как получить кнопки и ссылки одинакового размера для одного класса?

0 голосов
/ 04 февраля 2012

У меня есть такая простая форма в html: 

<form action="add" method="get">
    <input name="ok" type="submit" value="ok" class="btn" />
    <a class="btn" href="ok">ef</a>
</form>

И у меня есть такая CSS: 

.btn {
  font-family: Arial, Tahoma, Verdana, sans-serif;
  font-size: 14px;
  font-weight: bold;
  text-shadow: 0 -1px rgba(127, 127, 127, 0.5);
  text-decoration: none;
  line-height: normal;
  text-align: center;

  cursor: pointer;
  display: inline-block;
  /*padding: 5px 12px;*/
  color: #fff;
  border-bottom: 1px solid #EEE;
  outline: none;
  border: none;

  background-repeat: no-repeat;
  background: -o-linear-gradient(top,  #3BA5C8,  #2A829E); 
  background: -moz-linear-gradient(top,  #3BA5C8,  #2A829E);  
  background: -webkit-linear-gradient(left top, left bottom, #3BA5C8, #2A829E);   
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3BA5C8', endColorstr='#2A829E');
  }

Но что не так?в Firefox и т. е. 7 a get, который тегирует: a и вводит (отправляет) другой по высоте, сумма больше, а меньше.Помогите мне, пожалуйста.

См. http://jsfiddle.net/TxQpN/14/ работает т.е. FF, но не в IE7

1 Ответ

0 голосов
/ 04 февраля 2012

Вы должны определить высоту для <a> & button так: 

.btn{
 height:30px;
 vertical-align:top;
}
...