页面上出现的 JavaScript 继承了“inline-block”css答案

【问题标题】：JavaScript appearing on the page with "inline-block" css inherited页面上出现的 JavaScript 继承了“inline-block”css
【发布时间】：2014-07-18 03:41:23
【问题描述】：

我们正在使用 display: inline-block;控制可能存在于“test”类的 div 中的元素。 javascript 现在出现在页面上。我不知道“脚本”标签可以渲染到页面上。有没有人找到一种方法来处理这个示例代码，而不是碰到诸如“样式”和“脚本”之类的元素？

我们愿意使用 display:none;在我们的脚本和样式标签上，但这是一个杂项。

<html>
<head>
    <style type="text/css">
        .test * {
            display: inline-block;
        }
    </style>
</head>
<body>
    <div class="test">
        <p>Text here</p>    
        <script type="text/javascript">
            function TestFunction() {
                var test = 1;
            };
        </script>
    </div>
</body>
</html>

输出是：

此处为文本 function TestFunction() { var test = 1; };

【问题讨论】：

.test script { display: none; }，但最好不要写.test *之类的选择器或将script标签深入到文档中。
.test * 更像是一个杂物
为什么不直接将脚本移到头部？
..或在页面底部。无论哪种方式，为什么要为自己工作。脚本不属于页面元素。
疯了，我在 15 年的 javascript 使用中从未见过这种情况

标签： javascript css

【解决方案1】：

最简单的方法是更改.test * {} 选择器。

另一种方法是使用以下内容推平样式：

script,style{
   display:none !important;
}

Here is a fiddle

【讨论】：

是的，我们已经测试过这个解决方案，但我们不确定我们是否想要隐藏那些无论如何都不应该出现的脚本。
我明白了。一个更好的解决方案是取消你的 CSS 选择器。我认为此解决方案的“笨拙”取决于您对 .test * {} 选择器与其他更好的选择器的需求。
我们将使用这个，因为时间限制鼓励使用 * 并且“display:none”是脚本标签的默认值。 Chrome 和 Firefox 都显示脚本并且都响应上面的修复。

【解决方案2】：

就像你之前评论的那样， “我们愿意在我们的脚本和样式标签上使用 display:none; ，但这是一个杂项。” 您正在将标签设置为用它来溢出它的胆量 .test * {display: inline-block}

你可以做几件事。

从该div中取出标签
不要在 CSS 中使用 * 选择器
在 css .test script {display: none;} 中添加另一个规则

【讨论】：

【解决方案3】：

您可以使用display: none; 覆盖它，也可以使用:not() 选择器，如下所示：

.test *:not(script) {
    display: inline-block;
}

或者，最好的选择可能是将你的脚本标签放在你的 </body> 标签内或它们应该去的头部。

【讨论】：

或者放在他们应该去的地方..实际上建议是把你所有的script标签放在</body>之前，而且:not只支持现代浏览器。
@RokoC.Buljan 关于脚本标签和现代浏览器的要点。如果 OP 不关心
恐怕2014年我们还是要惧怕一切。免费使用 CSS3 的时代还未到来 :(
确实：“不关心