Windows 8：使用 HTML5/CSS 创建 AppBar 样式按钮答案

【问题标题】：Windows 8: Creating AppBar Style Buttons with HTML5/CSSWindows 8：使用 HTML5/CSS 创建 AppBar 样式按钮
【发布时间】：2012-12-21 16:51:39
【问题描述】：

对于 Windows 8 应用程序，我可以使用“Segoe UI 符号”创建 AppBar 样式按钮，但它们绘制在矩形区域中，因此具有矩形背景。因为我想在悬停期间将它们的背景设置为不同的颜色，所以我需要去掉这个矩形。

正如下面的问题所指出的，按钮和样式的定义如图所示。

请说明如何实现。

create image from character

HTML：

<button id="myAppBarIcon" class="normal-size-icon">&#xE1D8;</button>

CSS：

.normal-size-icon {
    margin-top: 400px;
    margin-left: 630px;
    position: relative;
    font-size: 24px;
    font-family: 'Segoe UI Symbol';
    color: rgb(255, 255, 255);
    background: none;
    border: none;
}

更新：

下面的代码可以解决问题，但字体没有正确对齐。可能是因为它没有正确对齐。下图显示了布局。

.normal-size-icon {
    font-size: 24px;
    font-family: 'Segoe UI Symbol';
    color: rgb(555, 255, 255);
    min-width: 0;
    min-height: 0;
    border-radius: 50%;
    border-style: solid;
    padding: 0;
    text-align: center;
}

【问题讨论】：

你能提供一张不正确行为的图片吗？

标签： html css windows-8 appbar

【解决方案1】：

为此，您需要设置border-radius:50%;，以便您的按钮将形状变为圆形，然后添加min-width:0; min-height:0; 和text-align:center; 这是完整的css：

.normal-size-icon {
    font-size: 24px;
    font-family: 'Segoe UI Symbol';
    color: rgb(555, 255, 255);
    min-width: 0;
    min-height: 0;
    border-radius: 50%;
    border-style: solid;
    padding: 0;
    text-align: center;
}

如果不需要边框，可以设置border:none;。对不起我的英语不好

【讨论】：

它可以解决问题，谢谢，但我认为该符号既不垂直也不水平对齐。它看起来像我更新的问题。无论我做什么，我都无法使其正确对齐。
嗯，我不知道为什么你的符号没有正确对齐，但我在我的项目中测试了它，它工作得很好，符号对齐到中心。您是否为按钮的 id 设置了任何其他样式？
哦，我明白了。一个单独的项目没有显示问题。感谢您的回答，现在标记它。
我很高兴听到这个消息 :)。你最好清理和重建你的项目，这样你的项目才能完美运行。

【解决方案2】：

此行为由CSS hover selector 驱动，按钮的默认 CSS 将提供与浅色或深色主题对齐的内容，例如，

button:hover, input[type=button]:hover, input[type=reset]:hover,
input[type=file]::-ms-browse:hover {
    background-color: rgba(255, 255, 255, 0.13);
    border-color: rgb(255, 255, 255);
}

您可以使用以下内容非常具体地覆盖它：

.normal-size-icon:hover {
    background-color: red;
}

但您可能希望对其他状态和对象进行类似处理。

查看参考中包含的ui-light.css 和![ui-dark.css][1]；所有的答案都在那里:)

【讨论】：