正在更新一个在IE下运行的基于Web的项目，以在Chrome、Edge和Firefox等现代浏览器下运行。使用了Dojo Toolkit（v1.x）。
遇到的一个麻烦是，当dijit.dialog第一次出现时，第一个可聚焦的小部件无法突出显示。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="https://ajax.googleapis.com/ajax/libs/dojo/1.13.0/dijit/themes/claro/claro.css">
<script>dojoConfig = {parseOnLoad: true}</script>
<script src='https://ajax.googleapis.com/ajax/libs/dojo/1.13.0/dojo/dojo.js'></script>
<script>
require(["dojo/parser", "dijit/Dialog", "dijit/form/Button"]);
</script>
</head>
<body class="claro">
<div data-dojo-type="dijit/Dialog"
data-dojo-id="myFormDialog"
title="Form Dialog"
execute="alert('submitted w/args:\n' + dojo.toJson(arguments[0], true));">
<div class="dijitDialogPaneContentArea">
<p>This is a test.</p>
</div>
<div class="dijitDialogPaneActionBar">
<button data-dojo-type="dijit/form/Button"
type="submit"
onClick="return myFormDialog.isValid();">OK</button>
<button data-dojo-type="dijit/form/Button"
type="button" onClick="myFormDialog.hide()">Cancel</button>
</div>
</div>
<button id="buttonThree"
data-dojo-type="dijit/form/Button"
type="button" onClick="myFormDialog.show();">Show me! </button>
</body>
</html>当对话框第一次出现时，“确定”按钮不会显示轮廓来指示它有焦点，即使它有。如果在物理键盘上按Shift（或任何其他）键，则会显示轮廓。
我尝试使用各种方法模拟按键，希望它能触发焦点轮廓，但没有成功。我尝试对按钮使用Dijit focus（）方法，但没有显示轮廓，即使键盘焦点确实更改为按钮聚焦。
在IE11中，焦点轮廓可以按需呈现，但在主要的现代浏览器Chrome、Edge（Chromium）和Firefox中，焦点轮廓可以在初始对话框显示时呈现。这是Dojo 1.x的已知问题吗？问题存在于v1.17.0中，至少在1.10之前的版本中存在。
1条答案
按热度按时间tvokkenx1#
经过更多的实验，如果我显式设置CSS outline属性，关闭dijitButtonFocused类，我可以突出显示初始焦点按钮。也可以使用CSS边框，但它可能会改变呈现的布局，因为它影响对象的整体大小，而outline不会。
下面是一个CSS示例，它尝试在基于chrome的浏览器和firefox上复制焦点突出显示：
Firefox在高亮显示中似乎没有使用圆角，所以没有尝试这样做。Firefox确实有一个自定义的CSS属性来支持圆角，但我的目的是重新创建浏览器的本地高亮显示样式。
可能不需要.nihilo选择器，但我使用它是因为项目自定义了.nihilo主题，所以包含它是为了特定性。