相关疑难解决方法(0)

在查看大多数网站(包括SO)时,大多数网站使用:

<input type="button" />

代替:

<button></button>

• 如果有的话,两者之间的主要区别是什么？
• 是否有正当理由使用一个而不是另一个？
• 有合理的理由使用它们吗？
• 是否使用<button>兼容性问题,看到它没有被广泛使用？

我已经阅读了有关此的几个主题，但仍然不明白有效的替代方案。从视觉上看，它看起来就像我想要的那样，但我收到验证错误，并且我不知道如何更改它。这是我正在使用的一个简单版本：

<button type="submit" onclick="window.location.href='events.html'">
    <div id="box1" class="eventContainer">
    <h3>CLICK ON ME!</h3>
    <p>Description</p>
    <img>
    </div>
</button> 

我有一个圆形 < 按钮 >，里面有一个 < div > 代表一个 Unicode 图像。当前按钮设置为 border-radius: 12px; 高度：24px；和宽度：24px；而 <div> 是 font-size: 17px。< div > Unicode 图像位于内部但不居中，按钮稍微偏向一侧。

尽管 < div > 是什么字体大小，我怎样才能让 < div > 在椭圆形按钮内居中？

编辑

尽管按钮的大小或表情符号图像的大小，我想创建一个圆形/圆形按钮，其表情符号中心位于按钮中间。

按钮的 CSS 和 div 的表情符号图像：

#emoji-button {
  border-radius: 19px;
  width: 38px;
  height: 38px;
}

#thumb-emoji:after {
  content: "\01F44C";
  font-size: 20px;
}

以及带有表情符号图像的圆形/圆形按钮：

            <button
              type="submit"
              id="emoji-button"
            >
              <div id="thumb-emoji"></div>
            </button>

但它不是居中的。

有没有一种方法可以单独支持表情符号图像以供点击？

我在为 Bootstrap 按钮创建覆盖样式时遇到问题。

我有以下按钮代码：

<button id="btnTest" class="btn btn-primary">
    <span class="fa fa-certificate"></span>
    &nbsp;
    Test
    <div class="btn-overlay">
        <i class="fa fa-refresh fa-spin"></i>
    </div>
</button>

这就是我想要的按钮布局，我已经实现了以下 CSS：

.btn-overlay {
    position: absolute;
    padding: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    opacity: 0.5;
    transition: opacity .5s;
}

这使得覆盖覆盖整个容器 div（不确定这是如何发生的），而不仅仅是覆盖整个按钮。

知道我在这里做错了什么吗？一旦我得到覆盖部分，我就会担心fa-refresh图标居中。

我正在构建一个 React 应用程序，它采用日历的形式，用户应该能够单击日历上的日期。这些日子由大方块表示，以便它们可以包含当天的信息。出于可访问性的原因，使用<button>s 似乎是最明智的选择，但我的研究（为什么 <button> 元素不能包含 <div>？）+（https://www.w3.org/TR/2012/WD -html5-20120329/the-button-element.html#the-button-element ) 表示将 div 放在按钮内是不正确的。我能想到的唯一的其他选择是将日子变成<div>自己的日子，但使它们可点击并手动提供它们tabIndex和role适合可访问性目的的功能。

<div>对于可点击区域（其中还可能包含多个 s），正确的 html 标签或方法是什么？