出现在页面上的 JavaScript 继承了“inline-block”css
[英]JavaScript appearing on the page with "inline-block" css inherited
问题描述
We're using display: inline-block;
我们正在使用 display: inline-block; to control elements that might live within the div of class "test".控制可能存在于“test”类的 div 中的元素。 The javascript is now appearing on the page. javascript 现在出现在页面上。 I did not know "script" tags could ever render to the page.我不知道“脚本”标签可以呈现到页面上。 Has anyone found a way to work this example code to not hit elements such as "style" and "script"?有没有人找到一种方法来处理此示例代码以不命中诸如“样式”和“脚本”之类的元素？
We're willing to use display:none;我们愿意使用 display:none; on our script and style tags but that's a kludge.在我们的脚本和样式标签上，但那是杂乱无章的。
<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>
The output is:输出是：
Text here function TestFunction() { var test = 1;此处输入文本 function TestFunction() { var test = 1; }; };
3 个解决方案
解决方案1
3 已采纳 2014-05-28 19:00:46
The easiest way would be to change the .test * {} selector.最简单的方法是更改.test * {}选择器。
An alternate would be to bulldoze the style with something like:另一种方法是用类似的东西推平风格：
script,style{
display:none !important;
}
解决方案2
0 2014-05-28 19:01:06
You can overwrite it with display: none;你可以用display: none;覆盖它display: none; or you can use the :not() selector like so:或者你可以像这样使用:not()选择器：
.test *:not(script) {
display: inline-block;
}
Or, probably the best option would be to place your script tags just inside your </body> tag or in the head where they should go.或者，最好的选择可能是将脚本标签放在</body>标签内或放在它们应该去的地方。
解决方案3
0 2014-05-28 19:03:52
Just like you commented before, "We're willing to use display:none; on our script and style tags but that's a kludge."就像您之前评论的那样，“我们愿意在我们的脚本和样式标签上使用 display:none; 但这很麻烦。” You're setting the tag to spill its guts with that .test * {display: inline-block}您正在设置标签以使用该.test * {display: inline-block}
A couple of things you could do.你可以做几件事。
- Take out the tag from within that div从该 div 中取出标签
- Don't use the * selector in CSS不要在 CSS 中使用 * 选择器
- Add another rule within css
.test script {display: none;}在 css .test script {display: none;}添加另一个规则.test script {display: none;}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.