为什么关闭按钮（X）在我的模态中无法正确呈现？

Question

这就是我得到的：

我希望右上角的关闭按钮是X，我相信默认情况下它应该是默认的。请记住模态完美地工作，当我点击关闭按钮（A~ - ）时，它按预期工作。我已尝试在IE，Chrome和Firefox上运行它，并且在所有情况下问题仍然存在。

有什么想法吗？

---

<div id="group" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="groupLabel"
     aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="groupLabel">Add group</h3>
    </div>
    <div ng-controller="Ctrl">
        <form ng-submit="addGroup(newGroup, newColor); newGroup='';">
            <div class="modal-body">
                <div class="row-fluid">
                    <div class="span3 offset3">
                        Group name
                    </div>
                    <div class="span6">
                        <input class="input-block-level" type="text" ng-model="newGroup">
                    </div>
                </div>
                <div class="row-fluid">
                    <div class="span3 offset3">
                        Group color
                    </div>
                    <div class="span6">
                        <select ng-model="newColor" class="input-block-level">
                            <option value="">None</option>
                            <option value="red">Red</option>
                            <option value="blue">Blue</option>
                            <option value="green">Green</option>
                            <option value="orange">Orange</option>
                            <option value="cyan">Cyan</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
                <input class="btn btn-primary" type="submit" value="Save changes">
            </div>
        </form>
    </div>
</div>

这是感兴趣的行：

<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>

这些是我的包括：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" src="js/controller.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/ui-bootstrap.js"></script>
<script type="text/javascript" src="js/angular-ui-if.js"></script>
<link rel="stylesheet" href="css/bootstrap/css/bootstrap.css">

Answer 1

这是代码中的x：

× U + 00D7 广告标识

什么时候应该

x U + 0058 LATIN CAPITAL LETTER X 。

使用键盘上的那个。

Answer 2

因为您的按钮文字不是“x”。 这甚至可以在这个页面上看到，只需按[ctrl] + [f]用“x”填充搜索结果并按几次[f3]。将在页面上找到除“。”之外的所有“x”。

Answer 3

您使用的x不是真正的x，它是其他一些unicode角色。简单的解决方案是用正确编码的x替换它（提示：使用键盘）。

也可能是由于缺少图标字体，其中特殊×字符是关闭按钮图标，这意味着您需要仔细检查并确保在CSS中包含字体依赖项。或者，该元素的默认Bootstrap字体可能是×而不是您看到的A字符的字体，并且您在事后更改了字体。