Question

我的网络应用程序中有关于按钮的问题。有时，以不一致的方式，按钮点击区域与按钮在屏幕上显示的位置不匹配。

当我看屏幕时，一切看起来都很好但是当我把鼠标放在按钮上时，我没有得到指针光标，如果我点击按钮上的这一点，没有任何反应。然而，如果我将鼠标移动到按钮下方，光标将变为指针，然后我可以点击那里触发按钮动作。

我们已经验证了所有HTML，并且没有任何问题。目前，尽管处于完全迷雾状态，但我们认为它可能是我们使用的字体，因为它是从FontDeck加载的（使用Google字体库加载它）。我们认为问题可能来自那里，因为当字体被加载时，它会创建一个文本的闪存，导致所有内容都被移动一点，因为新加载的字体对于相同的定义大小来说有点高。

我们面临的主要问题是这个问题看起来是间歇性的（即我们无法重现它）。我们在Chrome和IE11中随机使用它。

有人知道它可能是什么吗？我最近在谷歌地图上看到了相同的问题，其中针脚的点击区域位于针脚的实际位置左侧。

非常感谢！

如果它可以提供帮助，这里有一个带有两个按钮的行，我们知道它们有时会在按钮下移动它们的点击区域：

<div class="row">
    <div class="col-md-6 col-sm-12 align-left">
        <button id="cancel-changes-control-setting-btn" type="button" class="btn btn-secondary" ng-click="vm.close()">Cancel changes to control settings</button>
    </div>
    <div class="col-md-6 col-sm-12 align-right">
        <button id="confirm-changes-control-setting-btn" type="button" class="btn btn-primary" ng-disabled="vm.confirmControlSettingBtnDisabled || vm.confirmSetting === false" ng-click="vm.submitControlSetting()">
            <img src="/Content/images/small-loader.gif" alt="loading" ng-show="vm.confirmControlSettingBtnDisabled" />
            Confirm changes
        </button>
    </div>
</div>

请注意，我们使用以下框架和库：AngularJS，Bootstrap，bootstrap-UI

按钮单击区域与渲染按钮不匹配

0 个答案: