按钮文本推开 Firefox 中的填充

关键词：

【中文标题】按钮文本推开 Firefox 中的填充【英文标题】：Button text pushes away the padding in Firefox 【发布时间】：2012-05-29 03:08:43 【问题描述】：

标记：

<input type="button" value="random text random text random text random text random text"
       style="padding-left:20px; text-align:left; width:100px;" />

这里padding-left 工作正常，直到我设置宽度，在中间切掉文本，这将padding-left 推开。顺便说一句，这只是一个 Firefox 问题。在所有其他浏览器中都能正常工作。实例：http://jsfiddle.net/aB25a/1

有什么想法吗？

【问题讨论】：

谢谢你的提示，我会马上做的。 这里是 jsfiddle 链接：jsfiddle.net/aB25a/1 所以重点是 Firefox 试图将按钮中的文本居中，包括让它溢出到左侧填充中。事实证明，一些网站依赖于这种行为；这就是它被实施的原因。 感谢鲍里斯的信息。你知道有什么方法可以防止这种情况发生吗？ 使用<button> 和包含文本的<span> 并在<span> 上设置填充？ 【参考方案1】：

您应该使用<button> 元素，这使您可以更好地控制其内容发生的情况：

<button class="wrong">
  <span>this pushes text to the left, ignoring padding</span>
</button>

然后样式是：

.wrong 
    width: 100px;
    overflow: hidden;


.wrong span 
    margin-left:30px;
    text-align: left;
    white-space: nowrap;

应该适用于所有浏览器的示例：http://jsfiddle.net/p8mg8/1/

【讨论】：

【参考方案2】：

尝试使用margin-left 而不是padding-left，我也建议使用类和CSS 文件。

设置width:auto;，或设置为某个值。

【讨论】：

这是我之前写的一个答案，它应该有助于 Sebs 回答有关边距而不是填充的问题 - ***.com/a/10701790/1160747 这就是问题所在。 =) 这里是 jsfiddle 链接：jsfiddle.net/aB25a/1 width:auto; 而不是 width:100px :) 但是如果我需要按钮为 100px 怎么办？ 它不能有这么多的文本:) 你也可以用另一个带有width:100px; 的 Div 包围它，所以无论如何它都会被切断。【参考方案3】：

了解如何使其工作：

input[type="button"]::-moz-focus-inner  margin-left:20px ;

【讨论】：

在按钮中的文本两侧添加填充

】在按钮中的文本两侧添加填充【英文标题】：Addpaddingtosidesoftextinabutton【发布时间】：2019-04-1416:14:57【问题描述】：使用Xcode\'sstoryboard，如何在UIButton\'s文本的左右添加填充？我这辈子都不知道该怎么做。这是我的按钮：我希... 查看详情

输入填充在Firefox中剪切文本

】输入填充在Firefox中剪切文本【英文标题】：inputpaddingcuttingouttextinfirefox【发布时间】：2014-08-1809:31:02【问题描述】：在Firefox中，当我使用引导表单控制输入元素时，如果我填充输入元素，它会通过向内填充而不是围绕文本来... 查看详情

如何根据淘汰赛js中的单选按钮选择填充文本框

】如何根据淘汰赛js中的单选按钮选择填充文本框【英文标题】：Howtopopulateatextboxbasedonradiobuttonselectioninknockoutjs【发布时间】：2020-02-1709:56:55【问题描述】：我是淘汰js的新手。我有一个带有三个选项和一个文本框的单选按钮组... 查看详情

自动填充已定义的随机文本 - Firefox 插件

】自动填充已定义的随机文本-Firefox插件【英文标题】：AutofillRandomTextfromdefined-FirefoxAddon【发布时间】：2012-12-1323:14:33【问题描述】：我正在使用自动填充插件https://addons.mozilla.org/pl/firefox/addon/autofill-262804/，我想用定义的随机文... 查看详情

css删除firefox按钮填充(代码片段)

查看详情

Firefox 在提交按钮中添加 2px 填充

】Firefox在提交按钮中添加2px填充【英文标题】：Firefoxadd\'s2pxpaddinginasubmitbutton【发布时间】：2012-08-3013:41:40【问题描述】：嗨，我似乎在使用Firefox在提交按钮中添加2个额外像素的填充时遇到了一些问题。我已经在chrome和IE9中对... 查看详情

需要根据 reactjs 中的单选按钮输入填充值

】需要根据reactjs中的单选按钮输入填充值【英文标题】：Needtopopulatevaluebasedonradiobuttoninputinreactjs【发布时间】：2021-02-0205:26:57【问题描述】：我想根据单选按钮输入填充文本字段的值，例如，如果单选按钮输出为“是”，那么... 查看详情

如何将宽度设置为“填充父项”的android按钮中的图标和文本居中

】如何将宽度设置为“填充父项”的android按钮中的图标和文本居中【英文标题】：Howtocentericonandtextinaandroidbuttonwithwidthsetto"fillparent"【发布时间】：2011-04-0717:53:02【问题描述】：我想要一个带有图标+文本的AndroidButton。我... 查看详情

在 Firefox 中删除额外的按钮间距/填充

】在Firefox中删除额外的按钮间距/填充【英文标题】：Removeextrabuttonspacing/paddinginFirefox【发布时间】：2011-07-2722:15:02【问题描述】：查看此代码示例：http://jsfiddle.net/Z2BMK/Chrome/IE8是这样的火狐看起来像这样我的CSS是buttonpadding:0;back... 查看详情

获取纬度/经度按钮以填充输入框

】获取纬度/经度按钮以填充输入框【英文标题】：GetLatitude/LongitudeButtontoFillInputBoxes【发布时间】：2012-01-3016:41:52【问题描述】：我有两个文本框，希望用户填写地理位置数据（纬度和经度）。我想要一个按钮，所以当用户点击... 查看详情

Firefox 和 Opera/Chrome/IE 中的表单填充差异

】Firefox和Opera/Chrome/IE中的表单填充差异【英文标题】：FormpaddingdifferencesinFirefoxandOpera/Chrome/IE【发布时间】：2010-11-2404:16:45【问题描述】：我的网站表单中的填充有问题。如果我为表单元素设置了高度/宽度，然后为其添加了填充... 查看详情

当我们在文本和图像之间切换按钮内容时，如何停止 SwiftUI 更改固定填充？

】当我们在文本和图像之间切换按钮内容时，如何停止SwiftUI更改固定填充？【英文标题】：HowtostopSwiftUIchangethefixedpaddingwhenweswitchbuttoncontentbetweenTextandImage?【发布时间】：2020-07-2815:41:50【问题描述】：所以我在屏幕底部有两个按... 查看详情

单选按钮不是由 Object 中的数据填充的

】单选按钮不是由Object中的数据填充的【英文标题】：RadiobuttonsarenotpopulatedbydatainObject【发布时间】：2021-12-2902:10:51【问题描述】：在这里完成一个问题。我正在使用一些数据创建应用程序。在FirstPage上有Picker，其中包含一些用... 查看详情

Firefox 输入占位符填充问题

】Firefox输入占位符填充问题【英文标题】：Firefoxinputplaceholderpaddingissue【发布时间】：2012-02-0608:46:35【问题描述】：为什么Firefox不对占位符文本进行填充。在此处查看示例http://jsfiddle.net/JfrfZ/如何解决？HTML<formmethod="get"action="/... 查看详情

IE/Firefox 中的填充和/或边距与 Chrome 不同

】IE/Firefox中的填充和/或边距与Chrome不同【英文标题】：Paddingand/ormargindifferentinIE/FirefoxthanChrome【发布时间】：2014-01-0113:21:05【问题描述】：这里是问题页面：http://www.alternativefreedom.com/grc275/a7/导航栏在chrome中看起来很完美，但在... 查看详情

减少按钮内的文本填充

】减少按钮内的文本填充【英文标题】：ReducetextpaddinginsideaButton【发布时间】：2012-07-0722:06:01【问题描述】：是否可以稍微减少普通AndroidButton内的文本填充以减小按钮的宽度？当然，整个文本应该仍然可见。【问题讨论】：【... 查看详情

为啥百分比填充/边距不适用于 Firefox 和 Edge 中的弹性项目？

】为啥百分比填充/边距不适用于Firefox和Edge中的弹性项目？【英文标题】：Whydoesn\'tpercentagepadding/marginworkonflexitemsinFirefoxandEdge?为什么百分比填充/边距不适用于Firefox和Edge中的弹性项目？【发布时间】：2016-08-1510:57:57【问题描述... 查看详情

在按钮单击时填充文本框

】在按钮单击时填充文本框【英文标题】：Populateatextboxonabuttonclick【发布时间】：2018-03-0813:57:39【问题描述】：在MSAccess2016中，当有人单击表单上的按钮时，我尝试在表单上填充文本框。按钮Command9-我已将OnClick事件设置为[EventPr... 查看详情