Почему абсолютное позиционирование в пределах <button>отличается от <div> - PullRequest
Новая
       4

Почему абсолютное позиционирование в пределах <button>отличается от <div>

9 голосов
/ 09 июля 2010

Я ожидаю, что следующий код поместит мой диапазон в верхний левый угол кнопки, но это не так. Почему это так? 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <style type='text/css'>
        </style>
    </head>
    <body>
        <button style='height:100px;width:100px;position:relative;'>
            <span style='position:absolute;top:0;left:0;'>text</span>
        </button>    
    </body>
</html>

<span> помещено относительно вертикальной средней линии (с отступом в 3 пикселя я не могу объяснить).

Замена <button> на <div> делает местами <span> в верхнем левом углу.

Вопрос: почему абсолютное позиционирование внутри кнопки (с позицией: относительный) ведет себя не так, как макет при использовании <div>? И как мне это исправить?

Фон: я использую два абсолютно расположенных элемента div внутри кнопки, чтобы создать кнопку с плавающей шириной и закругленными углами.

РЕДАКТИРОВАТЬ: ВАЖНО IE 8.0 работает точно так, как я ожидаю (диапазон в верхнем левом углу), проблема, которую я вижу, в Firefox (3.6.6).

Ответы [ 2 ]

4 голосов
/ 20 июля 2010

Я не советую использовать <button> таким образом. Стилизировать его действительно сложно, и вам придётся писать специфические стили для разных браузеров. Мне нужно было достичь чего-то очень похожего, и после обработки большого количества исключений и сложного позиционирования для поддержки различных браузеров, я выбрал эту структуру: 

<div class="button">
 <span>
  <button>Text</button>
 </span>
</div>

С помощью тега кнопки сбрасывать таким образом: 

button {
    background:none repeat scroll 0 0 transparent;
    border:0 none;
    font-family:inherit;
    font-size:inherit;
    font-weight:inherit;
    margin:0;
    overflow:visible;
    padding:0;
   position:relative;
 }

Вы даже можете использовать js для переноса <button> при загрузке страницы. Эта система оказалась гораздо более надежной и надежной. Требует меньше CSS и почти без стилей для конкретного браузера.

Обновление: Как я прокомментировал ниже, элемент обертки не должен быть тегом <a>. Помните, что нам нужен <button>, чтобы сохранить его функциональность, нам просто нужно, чтобы он был только текстовым (форма все равно будет отправлена ​​при вводе). Вы по-прежнему можете повторно использовать любой CSS, который вы можете использовать для превращения стандартных ссылок в расширяемые виджеты кнопок, только в этом случае это: <div> вместо <a>.

0 голосов
/ 18 июля 2010

Ваша проблема только с Firefox ??(3.6.6) - Не могу исправить это стандартным CSS.Попробуйте: 

button::-moz-focus-inner { 
  border: 0;
  padding: 0;
}

Это, надеюсь, поможет Firefox.Удачи!

...