JQuery UI 按钮的显示宽度不正确
使用 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像素？怎么解决这个问题呢？
请参阅此处了解该问题的复制情况。
A common way to create a button to access another page (i.e. link) using JQuery-UI is the following:
<div id="hb">
<form action="index.html"><input type="submit" value="Home" id="but_hb"></form>
</div>
In order to set the width and layout, one can do:
$('#but_hb').button().css({ width: 70 });
$('#hb').css({
textAlign: 'center',
width: 70,
top:0,
left:0,
position:"absolute"
});
My question is: why is the displayed width only 68 pixels? How to solve this?
See here for a replication of the issue.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
向您的按钮添加其他样式，您的操作系统（或者可能是插件）正在为您设计它的样式。将
background:"#f00"和border:"none"添加到 CSS，然后重新测量。Add additional styles to your button, your OS (or possibly a plugin) is styling it for you. Add a
background:"#f00"andborder:"none"to the CSS then remeasure.在 Firefox 9 中，实际宽度为 64px，边框为左侧 3px，右侧 3px，总计预期可见宽度为 70px。您始终必须考虑边框和填充。填充将扩大元素的宽度。请参阅 CSS 盒子模型
In Firefox 9, the actual width is 64px and the border is 3px on the left and 3px on the right, totaling the intended visible width to 70px. You always have to take the border and padding into account. Padding will expand the element's width. See The CSS Box Model
70 像素 -2X 边框。边框将取决于您的浏览器，除非您自己定义。 盒子模型
70px -2Xborder. The border will depend on your browser unless you define it yourself. Box Model