Неправильная отображаемая ширина для кнопки JQuery UI - PullRequest
Новая
       23

Неправильная отображаемая ширина для кнопки JQuery UI

0 голосов
/ 22 января 2012

Распространенным способом создания кнопки для доступа к другой странице (например, по ссылке) с помощью JQuery-UI является следующий: 

<div id="hb">
    <form action="index.html"><input type="submit" value="Home" id="but_hb"></form>
</div>

Чтобы установить ширину и макет, можно сделать: 

$('#but_hb').button().css({ width: 70 });
$('#hb').css({
    textAlign: 'center',
    width: 70,
    top:0,
    left:0,
    position:"absolute"
});

Мой вопрос: почему отображаемая ширина составляет всего 68 пикселей? Как это решить?

См. здесь для получения информации о проблеме.

Ответы [ 3 ]

1 голос
/ 22 января 2012

70px -2Xborder.Граница будет зависеть от вашего браузера, если вы сами не определите ее. Коробочная модель

enter image description here

1 голос
/ 22 января 2012

Добавьте дополнительные стили к вашей кнопке, ваша ОС (или, возможно, плагин) стилизует ее для вас.Добавьте background:"#f00" и border:"none" в CSS, затем повторите измерение. 

$('#hb').css({
    textAlign: 'center',
    width: 70,
    top:0,
    left:0,
    position:"absolute",
    background:"#f00",
    border:"none"
});
1 голос
/ 22 января 2012

В Firefox 9 фактическая ширина составляет 64 пикселя, а граница - 3 пикселя слева и 3 пикселя справа, что составляет предполагаемую видимую ширину до 70 пикселей. Вы всегда должны принимать во внимание границы и отступы. Отступ увеличит ширину элемента. См. Модель CSS Box

...