程序员经验分享-hwhale

元素上的框阴影行为

2024-05-10

Update:

在我提交错误报告后：https://bugs.chromium.org/p/chromium/issues/detail?id=763337 https://bugs.chromium.org/p/chromium/issues/detail?id=763337,

看来我们可以在 Chrome 版本 62 中修复它。

尝试将鼠标悬停在此的 td 元素上fiddle https://jsfiddle.net/1q98o385/3/在最新版本的 Chrome 和 Firefox 中。

Firefox 的工作方式就像一个魅力（在我看来，盒子阴影不应该在宽度/高度计算中添加任何内容），但 Chrome 遗憾地添加了滚动条（尝试将鼠标悬停在右下角的单元格上）。

我怎样才能防止这种情况发生，但仍然保持响应能力？

此行为似乎仅在使用绝对最新的 Chrome 版本时才会发生。对我来说是：

版本 61.0.3163.79（官方版本）（64 位）

刚刚在我的笔记本上测试了代码片段，该笔记本仍然安装了稍旧的版本。结果：悬停时没有滚动条。 自动更新并重新启动后，出现滚动条。

div {
  border: 1px solid green;
  width: 100%;
  overflow-x: auto;
  overflow-y: auto;
}

table {
  width: 100%;
}

td {
  border: 1px solid red;
}

td:hover {
  box-shadow: 2px 2px 15px -2px rgb(50, 50, 50);
}
<div>
  <table>
    <tr>
      <td>This is some content</td>
      <td>This is some content</td>
      <td>This is some content</td>
    </tr>
    <tr>
      <td>This is some content</td>
      <td>This is some content</td>
      <td>This is some content</td>
    </tr>
  </table>
</div>

看起来像是 Chrome 的 bug仅限 Windows https://stackoverflow.com/questions/46112995/box-shadow-behaviour-on-td-elements#comment79189474_46112995。我也测试过谷歌金丝雀 https://www.google.com/chrome/browser/canary.html（Chrome 63）并且问题仍然存在，因此可能不会这么快得到修复。

问题是由overflow: auto，在您的情况下，可以通过将其删除或设置为可见（默认）来轻松解决。

However当将单元格悬停在右侧（顶部和底部）时，正文会出现滚动条。解决方案可以设置overflow: hidden对于身体来说，所以预期的结果是理想的。

我想指出的是，这不是一个很好的解决方案，但我建议暂时使用它，直到这个错误得到修复。

body {
  overflow: hidden;
}

div {
  border: 1px solid green;
  width: 100%;
  overflow: visible;
}

table {
  width: 100%;
}

td {
  border: 1px solid red;
}

td:hover {
  box-shadow: 2px 2px 15px -2px rgb(50, 50, 50);
}
<div>
  <table>
    <tr>
      <td>This is some content</td>
      <td>This is some content</td>
      <td>This is some content</td>
    </tr>
    <tr>
      <td>This is some content</td>
      <td>This is some content</td>
      <td>This is some content</td>
    </tr>
  </table>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

html

css

Googlechrome

元素上的框阴影行为 的相关文章

  • Flex、AngularJS + Masonry、akoenig/angular-deckgrid 等 [重复]

    这个问题在这里已经有答案了 我一直在发送此电子邮件 我即将发布一个用于 Web 应用程序安全的应用程序 它需要使用像 Masonry 这样的网格 我已经尝试过所有的 每一个角度模块 指令和不同的方法 包括基于 CSS 的技术 纯 Vanil

  • 如何在浏览器上使用样式组件 CDN 构建？

    索引 html 我从以下位置获取 CDN 文件 我怎样才能访问styled功能 const styled window styled components不起作用 对于版本 5 如docs https styled components c

  • 将多个 CSS 文件连接成一个

    将多个 CSS 文件连接成一个 CSS 文件的最佳方法是什么 我想减少以下 进入 简单地做cat css css gt css 1 3

  • 鼠标移动时画布拖动

    我正在尝试构建一个可以使用鼠标移动拖动的画布 我做了一些我无法理解的错误 因为一开始似乎有效 然后出现了一个增量错误 使画布移动得太快 考虑以下代码 window onload function var canvas document ge

  • 在动态创建的元素的onclick函数的属性中传递一个字符串

    我试图在动态创建的锚元素的 onClick 事件处理函数的参数中传递一个字符串 请参阅小提琴http jsfiddle net shmdhussain bXYe4 http jsfiddle net shmdhussain bXYe4 我无

  • 平均分配固定大小容器的空间。 Flexbox 的案例？

    如何设计 HTML CSS 结构 将固定大小的容器水平分成三部分 第一部分的高度应与其内容需求一样高 第二部分和第三部分将共享剩余的空间五五十 无论它们的内容如何 如果其内容的大小超过此限制 则该部分应该是可滚动的 它的 HTML 部分很简

  • 如何使用 Spring Boot 传输音频

    我想让用户能够播放声音 我的实现在 Firefox 上运行良好 在 Safari 上 不播放声音 我验证了音频控制可以在 Safari 中与其他网站一起使用 所以 我认为我必须更改控制器中的某些内容 控制器 RequestMapping v

  • 如何使用 github 托管外部 CSS 文件？

    我将 css 上传到 github 然后转到网站上的文件并单击 raw 选项 我尝试将其添加到网页中 但 chrome 给出以下错误 资源解释为样式表 但使用 MIME 类型 text plain 进行传输 https raw github

  • 每个窗口都有单独的会话

    我正在尝试创建一个扩展 其中每个 Chrome 窗口都有自己的会话 我们之前使用过隐身模式 但问题是 虽然主窗口和隐身窗口有单独的会话 但会话在各个隐身窗口之间共享 有没有办法将 Chrome 配置为每次打开隐身窗口时使用单独的会话 您的目

  • 带有覆盖CSS的背景图像

    我如何在 CSS 中设计带有叠加层的背景图像 就像这个示例图像一样 这是代码 我想添加tour类到背景图像和叠加效果 div class tour div class container div class row div class co

  • 为什么我无法对自定义属性（又名 CSS 变量）进行动画处理？

    看这个动画 金色 div 有一个自定义属性动画的动画 keyframes roll o 1动画 o 这是分步动画的 银色 div 有一个动画 其中normal属性是动画的 keyframes roll o 2动画left 这会持续动画 为什

  • 如何在 HTML 中将文本设置为粗体？

    我正在尝试使用 HTML 将一些文本加粗 但我很难让它发挥作用 这就是我正在尝试的 Some

  • 如何让php页面从html页面接收ajax post

    我有一个非常简单的表单 其中有一个名字输入字段 我捕获了表单数据 并使用标准 jQuery 发布方法通过 ajax 将其传输到 PHP 页面 但是 我根本无法从 PHP 页面获得任何在服务器端捕获数据的响应 我不确定我做错了什么或缺少什么

  • 浮动CSS属性导致父div不继承高度？

    我在 div 中有一个元素设置为float right但是 它会导致最外面的 div 不环绕 这是jsfiddle http jsfiddle net W792X 5 for it 我试图让提交按钮在 div 内浮动 但设置该属性似乎会导致

  • 如何在 CSS 中将容器内的多个 div 居中

    我正在测试像 Windows Metro 风格的中心分隔线 container height 300px width 70 background EEE margin 10px auto position relative block ba

  • 粘性背景图像/使用 CSS

    我目前正在创建我的第一个网站 并且即将完成 我在标题下为主体使用背景图像 我发现每个页面都有一个问题 因为它们的高度都不同 这使得我背景图像的当前设置放大图片以适合整个页面 我想做的是将背景图像设置为 粘性 我的想法是 背景图像将直接位于标

  • 如何计算一行中Flexbox项目的数量？

    网格是使用 CSS flexbox 实现的 Example http jsbin com jumosicasi edit html css js output 本示例中的行数为 4 因为我出于演示目的固定了容器宽度 但是 实际上 它可以根据

  • 在什么情况下，使用 HTTP/2 单独加载图像会比使用 HTTP/1.1 中的精灵一次加载所有图像慢？

    HTTP 2 使多路复用连接成为可能 从而消除了与服务器的多个连接的需要 通过单个连接 可以将许多单独的图像发送到客户端 这避免了将多个图像组合成一个并使用 CSS 将其分开的旧图像精灵模式 我很好奇精灵在 HTTP 2 世界中是否仍然会更

  • Radiobutton-带有纯 html/css 的按钮

    是否可以创建像这样的单选按钮JQuery http jqueryui com demos button radio那些 用纯html css thanks 试试这个小提琴 http jsfiddle net mcXm7 1 http jsf

  • HTML5 地理定位 - 在 iOS 上无法始终工作

    目前正在使用 HTML5 地理定位 我已经在所有网络浏览器上测试了它 它似乎工作正常 然而 当我在 iPad 上测试地理定位时 它在 iPad mini 上始终有效 但当我将其放在更大的 iPad iPad 2 上时 位置似乎并不总是有效

随机推荐

热门标签