Question

我删除了之前的问题并重新打开了一个新问题，因为我现在可以自己指出问题并寻求指导。

现在我在这里有一个网站：http://msdixon.co.uk/test123/

现在，如果您使用右侧的工具箱，其中包含三个图标。工具提示不合适。我设法发现导致此问题的CSS是：

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

如果您打开开发人员工具并codebarracksUI.css并删除它，您将看到一切正常。但是，启用它后，我正在使用的工具提示插件的偏移量是错误的。因此工具箱项的offset（）不正确。但是这可以解决它。

我需要帮助获取一个解决方案，这个解决方案允许我将css保持在上面，因为我需要它用于网格系统但是帮助我解决我的问题，工具提示位置不正确。

修改如果我添加这个：

-webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;

到.main-sidebar课这解决了我的问题。任何人都能解释为什么会这样吗？

参考：.main-sidebar css：

.main-sidebar {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    padding-top: 50px;
    min-height: 100%;
    width: 230px;
    z-index: 810;
    background-color: #272b35;
    -webkit-transition: -webkit-transform .3s ease-in-out,width .3s ease-in-out;
    -moz-transition: -moz-transform .3s ease-in-out,width .3s ease-in-out;
    -o-transition: -o-transform .3s ease-in-out,width .3s ease-in-out;
    transition: transform .3s ease-in-out,width .3s ease-in-out;
}

box-sizing导致我的工具提示定位在错误的位置

0 个答案: