В Mozilla моя кнопка не выглядит хорошо, как показано в Chrome

0

Я хочу показать свою кнопку в Mozilla, например Chrome, поэтому, пожалуйста, помогите мне, что я сделаю для этого. Это мой код.

CSS:

.green {
     background: linear-gradient(to bottom, #9CD645 0%, #8AC530 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
     border: 1px solid #82B436;
}

.large {
     font-size: 18px;
}
.btn {
     border: 1px solid #82B436;
     border-radius: 25px;
     box-shadow: 0 1px rgba(99, 159, 8, 0.35);
     color: #508400;
     display: inline-block;
     font-weight: bold;
     padding: 3px 12px;
     text-decoration: none;
     text-transform: uppercase;
}

.green {
     background-color: #8CC63F;
 }

.btn span {
     background: url("images/icon_arrows.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
     display: block;
     float: right;
     height: 18px;
     margin: 5px;
     width: 18px;
}

HTML:

<a href="smoodees" class="btn large green">
    Check out our Smoodees
    <span></span>
</a>
  • 1
    Какая именно у вас проблема? Они выглядят одинаково для меня в обоих браузерах.
  • 0
    проблема в том, что значок на кнопке не выравнивается в Mozilla
Показать ещё 1 комментарий
Теги:
browser
google-chrome
mozilla

2 ответа

2
Лучший ответ

Оформить эту скрипту:

http://jsfiddle.net/realdeepak/gvC9z/1/

или Для совместимости браузеров в firefox вы можете использовать css hack следующим образом:

@-moz-document url-prefix() { 
  .large {
    font-size: 17px;
  }
}

Или попробуйте это, и исправьте выравнивание дополнений css в соответствии с вашим экраном:

<style type="text/css">
 .green {
     background: linear-gradient(to bottom, #9CD645 0%, #8AC530 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
     border: 1px solid #82B436;
}

.large {
     font-size: 18px;
}
.btn {
border: 1px solid #82B436;
border-radius: 25px;
box-shadow: 0 1px rgba(99, 159, 8, 0.35);
color: #508400;
display: inline-block;
font-weight: bold;
padding: 3px 30px 3px 10px;
text-decoration: none;
text-transform: uppercase;
position: relative;
}

.green {
     background-color: #8CC63F;
 }

.btn span {
     background: url("images/icon_arrows.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
     height: 18px;
     margin: 5px;
     width: 18px;
     position: absolute;
     top: 0;
     right: 0;
}

</style>
  • 0
    у меня есть проблема с иконкой в span, он показывает нормально в Chrome, но не в Mozilla. значок переходит на следующую строку в Mozilla
  • 0
    @ user3278839, я обновил свой ответ. Если возможно, используйте свойство position для этого сценария.
Показать ещё 8 комментариев
0

Полное изменение ответа.

Попробуйте эту структуру:

<a href="smoodees" class="btn large green"> <p id = "text"> Ознакомьтесь с нашими Smoodees </p> <span> </span> </a>

и измените CSS так:

#id {float: left}

span {float: left}

edit: для нескольких кнопок измените идентификатор на класс

  • 0
    у меня есть проблема с иконкой, которая называется вызовом в качестве фонового изображения .. значок не выравнивается в Firefox
  • 0
    dev.xcluesiv.com/linssmoodees отметьте его в Firefox, этот значок кнопки не выровнен, как показано в Chrome
Показать ещё 5 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню