html - 如何使用纯 HTML 和 CSS2 模仿 Android/iOS 方形按钮？

Question

这似乎几乎是不可能的。

我正在尝试创建纯 HTML/CSS 的方形链接按钮，其中文本居中且不使用 CSS3。

我已经尝试了所有我能找到的关于 inline-block 中垂直居中文本的答案的变体，但我尝试的任何一个都不满足以下限制:

1. 整个按钮元素必须是一个链接，而不仅仅是文本。
2. 如果按钮元素的宽度不够宽，按钮元素内的文本必须垂直和水平居中并很好地换行。
3. 所有按钮的高度和宽度应该相同。
4. 按钮必须水平并排放置，如果浏览器的宽度减小或不足以容纳所有按钮，则换行到下一行。
5. 为确保与旧版浏览器的兼容性，此解决方案必须不需要 CSS3(例如 display:flex)。

想想 iOS 和 Android 主屏幕上的并排方形按钮，但使用简单和纯 HTML/CSS。不需要阴影、渐变、反射，只需要按钮结构。

我试过使用 :before 嵌套 div 作为在 inline-block 中垂直对齐文本的技巧，我试过使用 display :table 与行和单元格，我什至尝试过 display:flex 但它使用 CSS3。我尝试过的解决方案均不符合上述所有标准。

所以我想知道，如果没有 CSS3，这是否可行？如果是这样，我认为这样的事情本来可以非常简单地完成，有什么窍门？

Answer 1

是的，我相信这是可能的，但它使用了很多嵌套跨度!

这里使用的最疯狂的 CSS 是 display: table 和 display: inline-block，所以我认为你应该很安全。

body {
  font-family: sans-serif;
}
.special-button {
  display: inline-block;
  height: 100px;
  width: 100px;
  overflow: hidden;
  position: relative;
  background: #eee;
  color: #333;
  text-decoration: none;
}
.special-button:hover {
  background: #333;
  color: #fff;
}
.special-button-table {
  display: table;
  width: 100%;
  height: 100%;
}
.special-button-cell {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  padding: 10px;
}

<a href="#" class="special-button">
  <span class="special-button-table">
    <span class="special-button-cell">Text Here</span>
  </span>
</a>

<a href="#" class="special-button">
  <span class="special-button-table">
    <span class="special-button-cell">Longer Text Item Here</span>
  </span>
</a>

<a href="#" class="special-button">
  <span class="special-button-table">
    <span class="special-button-cell">Text Here</span>
  </span>
</a>

<a href="#" class="special-button">
  <span class="special-button-table">
    <span class="special-button-cell">Really Really Long Text Item That Overflows Here</span>
  </span>
</a>