Question

我有一个按钮，我使用jQuery's UI's button设置样式。

<button class="widget-button">Submit</button>

根据某些事件，此按钮可以清除其文本。

$('.widget-button').button('option', 'label', '');

发生这种情况时，按钮的高度会变小。即使没有显示文字，我也希望保持按钮的高度。

关于如何实现这一目标的任何想法？

Answer 1

您可以将以下内容添加到CSS中：

.widget-button { min-height: 23px }

将min-height设置为您想要的任何内容，我认为23px是大多数jQuery UI的标准。如果您也想设置宽度，也可以使用min-width。

Answer 2

如果我记得，jQuery UI的按钮高度是相对于文本大小的。因此，最小高度的CSS解决方案将给出按钮高度，但它可能不会与文本的高度完全相同 - 这可能因浏览器而异，并且安装的字体与安装的字体有所不同，导致视觉上的变化。清除文本时的高度。

因此，我不会使用CSS作为解决方案，而是清除文本，将其替换为 

（所有这一切，我很好奇从UI / UX的角度来看一个空白按钮会做什么）

Answer 3

这是未经测试的，但我认为应该有效（并且没有看到你的html我不能提供更好的东西）：

$('.widget-button').css('height', $(this).height()).button('option', 'label', '');

理论上，在清除文本之前，应该将当前height作为内联样式分配给.widget-button。当然，您也可以使用data-前缀自定义属性：

$('.widget-button').attr('data-buttonHeight',$(this).height()).button('option','label','');

但是，如上所述，这是未经测试的。如果您可以发布标记，并使用jQuery代码清除button的文本，我们可能会提供更好的答案。

Answer 4

只需在CSS中为该按钮定义min-height的正确值。

Answer 5

您也可以使用纯CSS执行此操作，并且始终具有按钮的价值（这对于屏幕阅读器等很有用。

.widget-button { text-indent: -9999px; }

Answer 6

使用min-height“hack”，以便它适用于所有浏览器：

.selector{
     min-height:23px; 
     height:auto !important;
     height:23px
}

其中min-height和第二个高度是您希望元素最小的高度

Answer 7

因为您要按类识别按钮（或按钮），所以您可以将该类用作css类，并设置固定高度或最小高度。

.widget-button
        {
            height:25px; 
        }    

.widget-button
        {
            min-height:25px; 
        }

或者如果你想从用于css的类名中分离jquery使用的类名，你可以使用

.widget-button-ui
        {
            height:25px;
        }

并将多个类名应用于对象，如：

<input type="button" id="demobutton" class="widget-button widget-button-ui" value="Hello World" />

最终选项，将其修复为标记：

<input type="button" id="demobutton" class="widget-button" value="Hello World" style="min-height:23px;" />

应用样式的方式，标记本身的样式值优先。