如何针对某些情况(如Internet Explorer特定的CSS或特定于Internet Explorer的JavaScript代码)仅定位Internet Explorer 10？
我试过这个,但它不起作用:
<!--[if IE 10]> <html class="no-js ie10" lang="en"> <![endif]-->
<!--[if !IE]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
Internet Explorer 10忽略条件注释并使用<html lang="en" class="no-js">而不是<html class="no-js ie10" lang="en">.
html javascript css conditional-comments internet-explorer-10
我有一个CSS选择器,应该在单击标签时显示子内容.选择器沿着input:checked + element + element给最终元素显示块的行(默认为无).问题是它适用于所有主流浏览器,但webkit除外.Chrome,Safari和Android的移动浏览器(v2.2抱歉,我落后于时代)都无法显示元素.当我检查Chrome中的元素时,它会显示它应该是display: block但它不会渲染它.我可以取消选中并检查开发人员工具中的属性并显示,但不是之前.
我认为这是webkit中的一个错误.
以下是多部分问题:这是webkit中的已知错误吗？我的选择器出了什么问题吗？我如何解决webkit浏览器的问题(任何创意建议)？
HTML
<input id="c1" type="checkbox">
<label for="c1">Ein</label>
<section>Content</section>
<input id="c2" type="checkbox">
<label for="c2">Zwei</label>
<section>Content</section>
<input id="c3" type="checkbox">
<label for="c3">Drei</label>
<section>Content</section>
CSS
input {
float:left;
clear:left;
visibility: hidden;
position:absolute;
}
label {
color:green;
display:block;
cursor:pointer;
}
section {
display:none;
}
label:after {
content:" +";
}
input:checked + label:after {
content:" -";
}
input:checked + label + section {
display:block;
}
演示:http://jsbin.com/epibin/2
来源:http …
我正在尝试制作一个包含默认选项列表的表单,并且还可以展开以显示几个exta选项.我使用以下CSS代码执行此操作:
.myForm .moreOpts {display:none;}
.myForm #more:checked +*+ .moreOpts {display:block;}
使用以下HTML:
<form action="#" class="myForm">
<ul>
<li>
<input type="checkbox" id="pref-1" name="pref-1" value="1">
<label for="pref-1">Foo</label>
</li>
<li>
<input type="checkbox" id="pref-2" name="pref-2" value="2">
<label for="pref-2">Bar</label>
</li>
<li>
<input type="checkbox" id="more" name="more" value="true">
<label for="more">More options</label>
<ul class="moreOpts">
<li>
<input type="checkbox" id="pref-3" name="pref-3" value="3">
<label for="pref-3">Baz</label>
</li>
<li>
<input type="checkbox" id="pref-4" name="pref-4" value="3">
<label for="pref-4">Qux</label>
</li>
</ul>
</li>
</ul>
</form>
除了Android Browser和Dolphin之外,此代码在每个浏览器中都能完美运行.我发现了一篇建议添加这个 "bugfix" 的文章,但这只能解决我在Dolphin中遇到的 …
在这个问题" CSS3选择器,像jQuery的.click()？ "我发布了一个回答使用的:checked状态input,type="checkbox"以切换元素的显示.
这是我在答案中发布的演示的HTML:
<input type="checkbox" id="switch" />
<nav>
<h2>This would be the 'navigation' element.</h2>
</nav>
<label for="switch">Toggle navigation</label>
和CSS(为了简洁而剥离过渡):
#switch {
display: none;
}
#switch + nav {
height: 0;
overflow: hidden;
/* transitions followed */
}
#switch:checked + nav {
height: 4em;
color: #000;
background-color: #ffa;
/* transitions followed */
}
label {
cursor: pointer;
}
有一次,我张贴发生,我认为我们可以在答案也切换的文本label用于触发复选框的状态变化,使用下面的选择(已修订label的文本'导航’):
label {
display: inline-block;
cursor: …a:hover + span { background:yellow; }
a:hover > span { background:yellow; }
a:hover ~ span { background:yellow; }
前两个选择器工作得很好.但是,第三个选择器不起作用？
为什么？
更新:我启动了所有浏览器......
Opera 11 - Works
Safari 5 - Works
Firefox 3.6 - Works
IE9 RC - Works
Chrome 9 - 不起作用
Chrome问题然后......
此代码在桌面上的Chrome中运行良好,但不适用于Android股票浏览器:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
input:checked ~ span {color:red;}
</style>
</head>
<body>
<label>
<input type="checkbox" />
<span>First item</span>
</label>
</body>
</html>
基本上,当您单击复选标记时,span标记文本应变为红色.用android 4.0在我的Galaxy Note上没有变红.
我的代码出了什么问题？
我使用Bootstrap插件awesome-bootstrap-ckeckbox,我也在使用ASP.NET MVC,然后我的所有复选框都呈现两个输入,一个作为复选框输入,另一个作为隐藏输入,因为我修改了CSS选择器,例:
HTML代码
<div class="checkbox">
<input id="checkbox1" type="checkbox">
<input type="hidden" />
<label for="checkbox1">
Default
</label>
</div>
<div class="checkbox checkbox-primary">
<input id="checkbox2" type="checkbox" checked>
<input type="hidden" />
<label for="checkbox2">
Primary
</label>
</div>
CSS代码
/* awesome-bootstrap-checkbox */
.checkbox input[type="checkbox"]:checked + label::after {
font-family: 'FontAwesome';
content: "\f00c";
}
.checkbox input[type="checkbox"]:disabled + label::before {
background-color: #eeeeee;
cursor: not-allowed;
}
.checkbox-primary input[type="checkbox"]:checked + label::before {
background-color: #428bca;
border-color: #428bca;
}
.checkbox-primary input[type="checkbox"]:checked + label::after {
color: #fff;
}
/* my own version */ …我需要为一个具有不同样式的输入字段设置两个标签。
由于某种原因，此代码不起作用。它确实适用于第一个标签，但仅部分适用于第二个标签。
此代码有效
input.switcher[type=checkbox] + label + label
但这不是（第二个标签不会通过检查和关闭来改变颜色）
input.switcher[type=checkbox]:checked + label + label
任何如何解决这个问题的建议表示赞赏！