我今天看到一些奇怪的东西看看与帖子相关的图片(下面).我已经输入了[type =“text”].它的“1”在屏幕上的图片.它的CSS看起来像这样;
table tbody input {
width: 40px;
border: none;
height: 16px;
}
只是一个普通的输入,除此之外没有任何边框.
然后,我看着这些开发工具,我看到了以前从未见过的东西.输入中的“#shadow-root”和div.
我知道,这些开发工具会自动添加一些东西来在原始网页上显示提示.然而,我真的好奇为什么在输入内添加一个div,而且实际上可以在webkit引擎上渲染这样的东西.
Chrome开发工具上次有点奇怪,我有一些问题.例如,它将style.css文件翻了一番,并忘记加载另一个jQuery的日历的可怕外观的原因(仅当我的浏览器加载时).
这可能不是一个bug,而是一个功能,但我很想更多地了解它
解决方法
那就是Shadow DOM.
只需点击选项并禁用“显示阴影DOM”选项.
w3c草案可以在https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html找到
而关于Chrome看到http://chemicaloliver.net/programming/inspecting-the-shadow-dom-in-google-chrome-inspector/
