Dex*_*der 31 css conditional-comments
我知道您可以在HTML中使用IE条件注释:
<!--[if IE]>
<link href="ieOnlyStylesheet.css" />
<![endif]-->
但是,如果我想在样式表中仅定位IE,为html中的特定元素设置css规则,该怎么办？例如,您可以在css文件中使用此Chrome/Safari hack 作为css代码...
@media screen and (-webkit-min-device-pixel-ratio:0) {
.myClass{
background: #fff;
background:rgba(255,0,255,0.7);
}
}
但是使用CSS样式表中的IE hack如下:
<!--[if IE]>
.myClass{
background: #fff;
background:rgba(255,0,255,0.7);
}
<![endif]-->
不起作用.我在样式表中使用什么来仅针对IE？
Der*_*ker 24
条件注释在样式表中不起作用.相反,您可以在HTML中使用条件注释将不同的CSS类或ID应用于可以使用CSS定位的元素.
例如:
<!--[if IE]>
<div id="wrapper" class="ie">
<![endif]-->
<!--[if !IE]>
<div id="wrapper">
<![endif]-->
此外,有一些工具,如Modernizr,以非常类似的方式进行特征检测(通过向<html>元素添加类).您可以使用它逐步增强新浏览器的设计/脚本,同时仍支持旧版浏览器.
Yan*_*ran 18
它比Derek Hunziker所说的更容易:
只需包含以下代码:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
然后你可以轻松地定位它,例如,如果你想要目标IE 8并降低你写:
.lt-ie9 body{css rule here;}
你完成了!
干杯
条件注释在Internet Explorer 9及更低版本中有效,但Internet Explorer 10及更高版本会忽略这些注释.您可以在样式表中使用Internet Explorer特定的CSS规则.黑客？是的,但不是真的很脏的黑客imho.
要定位Internet Explorer 8,9,10和11,您可以使用:
@media screen\0 {...}
要定位Internet Explorer 6和7,您可以使用:
@media screen\9 {...}
资料来源:https://keithclark.co.uk/articles/moving-ie-specific-css-into-media-blocks/media-tests/
它对我有用.我没有时间在不同的浏览器中测试它.如果您可以确认它是否有效,请添加一些注释(使用您测试过的浏览器.)
例:
/* Default CSS rule for all browsers */
span.icon {
width: 16px;
display: inline-block;
margin-right: -16px;
}
/* Style rules in the media rules below will only be applied in Internet Explorer */
/* Other browsers will ignore them. */
@media screen\0, @media screen\9 {
span.icon {
margin-right: 8px;
}
}--- Nothing to see here. Only CSS rules ---一个完整的例子:
span.icon {
width: 16px;
display: inline-block;
margin-right: -16px;
}
/* Style rules in the media rules below will only be applied in Internet Explorer, other browsers will ignore them. */
@media screen\0, @media screen\9 {
/* Style rules here will only be applied in Internet Explorer, other browsers will ignore them. */
span.icon {
margin-right: 8px;
}
}
/* -----------------------------------------------------------------------------*/
a.icon {
-webkit-padding-start: 1.5em;
text-decoration: none;
}
a.icon:hover {
text-decoration: underline;
}
span.icon_file {
background : url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAABnRSTlMAAAAAAABupgeRAAABHUlEQVR42o2RMW7DIBiF3498iHRJD5JKHurL+CRVBp+i2T16tTynF2gO0KSb5ZrBBl4HHDBuK/WXACH4eO9/CAAAbdvijzLGNE1TVZXfZuHg6XCAQESAZXbOKaXO57eiKG6ft9PrKQIkCQqFoIiQFBGlFIB5nvM8t9aOX2Nd18oDzjnPgCDpn/BH4zh2XZdlWVmWiUK4IgCBoFMUz9eP6zRN75cLgEQhcmTQIbl72O0f9865qLAAsURAAgKBJKEtgLXWvyjLuFsThCSstb8rBCaAQhDYWgIZ7myM+TUBjDHrHlZcbMYYk34cN0YSLcgS+wL0fe9TXDMbY33fR2AYBvyQ8L0Gk8MwREBrTfKe4TpTzwhArXWi8HI84h/1DfwI5mhxJamFAAAAAElFTkSuQmCC ") left top no-repeat;
}
span.icon_dir {
background : url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAd5JREFUeNqMU79rFUEQ/vbuodFEEkzAImBpkUabFP4ldpaJhZXYm/RiZWsv/hkWFglBUyTIgyAIIfgIRjHv3r39MePM7N3LcbxAFvZ2b2bn22/mm3XMjF+HL3YW7q28YSIw8mBKoBihhhgCsoORot9d3/ywg3YowMXwNde/PzGnk2vn6PitrT+/PGeNaecg4+qNY3D43vy16A5wDDd4Aqg/ngmrjl/GoN0U5V1QquHQG3q+TPDVhVwyBffcmQGJmSVfyZk7R3SngI4JKfwDJ2+05zIg8gbiereTZRHhJ5KCMOwDFLjhoBTn2g0ghagfKeIYJDPFyibJVBtTREwq60SpYvh5++PpwatHsxSm9QRLSQpEVSd7/TYJUb49TX7gztpjjEffnoVw66+Ytovs14Yp7HaKmUXeX9rKUoMoLNW3srqI5fWn8JejrVkK0QcrkFLOgS39yoKUQe292WJ1guUHG8K2o8K00oO1BTvXoW4yasclUTgZYJY9aFNfAThX5CZRmczAV52oAPoupHhWRIUUAOoyUIlYVaAa/VbLbyiZUiyFbjQFNwiZQSGl4IDy9sO5Wrty0QLKhdZPxmgGcDo8ejn+c/6eiK9poz15Kw7Dr/vN/z6W7q++091/AQYA5mZ8GYJ9K0AAAAAASUVORK5CYII= ") left top no-repeat;
}
span.icon_up {
background : url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAmlJREFUeNpsU0toU0EUPfPysx/tTxuDH9SCWhUDooIbd7oRUUTMouqi2iIoCO6lceHWhegy4EJFinWjrlQUpVm0IIoFpVDEIthm0dpikpf3ZuZ6Z94nrXhhMjM3c8895977BBHB2PznK8WPtDgyWH5q77cPH8PpdXuhpQT4ifR9u5sfJb1bmw6VivahATDrxcRZ2njfoaMv+2j7mLDn93MPiNRMvGbL18L9IpF8h9/TN+EYkMffSiOXJ5+hkD+PdqcLpICWHOHc2CC+LEyA/K+cKQMnlQHJX8wqYG3MAJy88Wa4OLDvEqAEOpJd0LxHIMdHBziowSwVlF8D6QaicK01krw/JynwcKoEwZczewroTvZirlKJs5CqQ5CG8pb57FnJUA0LYCXMX5fibd+p8LWDDemcPZbzQyjvH+Ki1TlIciElA7ghwLKV4kRZstt2sANWRjYTAGzuP2hXZFpJ/GsxgGJ0ox1aoFWsDXyyxqCs26+ydmagFN/rRjymJ1898bzGzmQE0HCZpmk5A0RFIv8Pn0WYPsiu6t/Rsj6PauVTwffTSzGAGZhUG2F06hEc9ibS7OPMNp6ErYFlKavo7MkhmTqCxZ/jwzGA9Hx82H2BZSw1NTN9Gx8ycHkajU/7M+jInsDC7DiaEmo1bNl1AMr9ASFgqVu9MCTIzoGUimXVAnnaN0PdBBDCCYbEtMk6wkpQwIG0sn0PQIUF4GsTwLSIFKNqF6DVrQq+IWVrQDxAYQC/1SsYOI4pOxKZrfifiUSbDUisif7XlpGIPufXd/uvdvZm760M0no1FZcnrzUdjw7au3vu/BVgAFLXeuTxhTXVAAAAAElFTkSuQmCC ") left top no-repeat;
}
.nowrap {
white-space: nowrap ;
}
div.fileList {
padding: 20px;
}
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
table.FileList {
border-collapse: collapse;
margin: 20px;
}
table.FileList th {
text-align: left;
font-weight: bold;
}
table.FileList td {
border: 0px solid #000;
}
table.FileList tr.heading{
border-bottom: 1px solid black;
}<table class="FileList">
<tr class="heading"><th>Archive</th></tr>
<tr><td> </td></tr>
<tr><td><span class="icon icon_dir nowrap"> </span><span class="nowrap"><a class="icon" href="http://localhost/browse?year=2018">2018</a></span></td></tr>
<tr><td><span class="icon icon_dir nowrap"> </span><span class="nowrap"><a class="icon" href="http://localhost/browse?year=2017">2017</a></span></td></tr>
<tr><td><span class="icon icon_dir nowrap"> </span><span class="nowrap"><a class="icon" href="http://localhost/browse?year=2016">2016</a></span></td></tr>
<tr><td><span class="icon icon_dir nowrap"> </span><span class="nowrap"><a class="icon" href="http://localhost/browse?year=2015">2015</a></span></td></tr>
<tr><td><span class="icon icon_dir nowrap"> </span><span class="nowrap"><a class="icon" href="http://localhost/browse?year=2015">2014</a></span></td></tr>
</table>