Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770
Форумы портала PHP.SU :: Версия для печати :: элемент внутри кнопки button
Форумы портала PHP.SU » Клиентская разработка » HTML, Дизайн & CSS » элемент внутри кнопки button

Страниц (1): [1]
 

1. Pavelbeginner - 15 Июля, 2014 - 17:30:15 - перейти к сообщению
Есть кнопка
CODE (htmlphp):
скопировать код в буфер обмена
  1.  
  2. .iconBtn{
  3.     padding:0;
  4.     border:0;
  5.     background:transparent;
  6.     position:relative;
  7.     display:inline-block;
  8. }
  9.  
  10. .icon{
  11.     position:absolute;
  12.     top:50%;
  13.     left:0;
  14.     background: url('Images/eSFX-Sprite.png') 0 0 no-repeat;
  15. }
  16.  
  17. .searchBtn{
  18.     width:19px;
  19. }
  20.  
  21. .searchBtn .icon{
  22.     width:19px;
  23.     height:19px;
  24.     margin-top:-9px;
  25.     background-position:-403px -723px;
  26. }
  27.  
  28. <button class="iconBtn searchBtn"><span class="icon"></span>&nbsp;</button>
  29.  


Внутри кнопки(тег button) есть спан, который аболютно позиционируется относительно button-а. Почему-то курсор(cursor:pointer) с тега button не наследуется спаном. Если же заменить тег button на тег a(ссылка), то наследование курсора(cursor:pointer) происходит. В чем дело? Пробовал даже спану принудительно задать
CODE (htmlphp):
скопировать код в буфер обмена
  1.  
  2. .searchBtn .icon{
  3.     cursor:pointer;
  4. }
  5.  

Не работает! курсор при наведение не появляется. что за дела? По-моему также не передается клик тегу button, если кликнуть на спан. А если заменить тег button на тег a, то передается.
2. armancho7777777 - 15 Июля, 2014 - 17:36:31 - перейти к сообщению
CODE (css):
скопировать код в буфер обмена
  1. .icon { display: block; }


Pavelbeginner пишет:
.icon{
    position:absolute;

Зачем ?

Pavelbeginner пишет:
</span>&nbsp;</button>

Для чего ?
3. Pavelbeginner - 15 Июля, 2014 - 17:45:27 - перейти к сообщению
armancho7777777 пишет:
Pavelbeginner пишет:
.icon{
position:absolute;

Зачем ?

эта кнопка может быть с текстом, а может и без. position:absolute используется для выравнивания иконки по вертикали
armancho7777777 пишет:
Pavelbeginner пишет:
</span>&nbsp;</button>

Для чего ?

кнопка(button) может идти в строке текста. если внутри button не будет ничего, то кнопка будет выравниваться в строке не по базовой линии шрифта, а по нижнему краю кнопки.
(Добавление)
armancho7777777 пишет:
CODE (css):
скопировать код в буфер обмена

.icon { display: block; }

не вариант т.к. на одном уровне с иконкой(тег span) может быть текст
4. armancho7777777 - 15 Июля, 2014 - 17:54:36 - перейти к сообщению
Мдааа....
http://jsfiddle[dot]net/M3wp3/1/
5. Pavelbeginner - 15 Июля, 2014 - 17:57:57 - перейти к сообщению
armancho7777777 пишет:
Мдааа....
http://jsfiddle.net/M3wp3/1/

и что это такое?
6. armancho7777777 - 15 Июля, 2014 - 18:03:31 - перейти к сообщению
В отличии от Вашей реализации, - адекватная кнопка.
7. Pavelbeginner - 15 Июля, 2014 - 18:03:54 - перейти к сообщению
В общем, всё о чём я говорю вот здесь можно увидеть, как клик то, что событие клика не передается, так и про то, что не наследуется cursor:pointer;
http://jsfiddle[dot]net/S6tw4/
(Добавление)
armancho7777777 пишет:
В отличии от Вашей реализации, - адекватная кнопка.

да какая к черту кнопка. Проблема не в кнопке, а в иконке, внутри кнопки. В моём примере по ссылке в качестве иконки высутпает красный квадрат.
8. armancho7777777 - 15 Июля, 2014 - 18:08:34 - перейти к сообщению
Pavelbeginner пишет:
да какая к черту кнопка.

Вы свой тон умерте.
Никто Вам тут ничего не должен.

В каком браузере "не пашет" ?
9. Pavelbeginner - 15 Июля, 2014 - 18:14:33 - перейти к сообщению
armancho7777777 пишет:
Pavelbeginner пишет:
да какая к черту кнопка.

Вы свой тон умерте.
Никто Вам тут ничего не должен.

В каком браузере "не пашет" ?

я не для того, чтобы оскорбить или чё-то типо того. я об одном пишу, об одной проблеме, а вы мне приводите пример кнопки. Ну как-минимум такое поведение в мозиле. В остальных браузерах клик не проверял, а вот курсор проверял - не наследуется.
10. Viper - 15 Июля, 2014 - 18:29:12 - перейти к сообщению
Pavelbeginner проверьте в IE11 получите результат отличный от FF.
Ваша задумка работает только в Хроме. Т.е. кнопка и ссылка выглядят одинаково и срабатывает корректно клик.
11. IllusionMH - 15 Июля, 2014 - 18:50:04 - перейти к сообщению
Viper, IE11 DP проблема решается добавлением overflow: visible;

Pavelbeginner, похоже на баг в FF. Скорее всего поможет только репорт в багтрекер и замена на ссылку. Семантика хромает, но работать будет.
12. armancho7777777 - 15 Июля, 2014 - 19:03:58 - перейти к сообщению
Не знаю, верно ли я понял задачу:
http://jsfiddle[dot]net/S6tw4/6/

 

Powered by ExBB FM 1.0 RC1