Fas*_*ack 173 css internet-explorer
这是我的CSS块:
.actual-form table {
padding: 5px 0 15px 15px;
margin: 0 0 30px 0;
display: block;
width: 100%;
background: #f9f9f9;
border-top: 1px solid #d0d0d0;
border-bottom: 1px solid #d0d0d0;
}
我只想让IE 7,8和9"看到" width: 100%
实现这一目标的最简单方法是什么？
Him*_*edi 253
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
#myElement {
/* Enter your style code */
}
}
说明:它是特定于Microsoft的媒体查询.使用特定于Microsoft IE的-ms-high-contrast属性,它只能在Internet Explorer 10或更高版本中解析.我已经使用了媒体查询的两个有效值,因此它将仅由IE解析,无论用户是否启用了高对比度.
Jam*_*ice 99
2017年更新
根据环境的不同,条件注释已在IE10 +中正式弃用并删除.
原版的
最简单的方法可能是在HTML中使用Internet Explorer条件注释:
<!--[if IE]>
<style>
.actual-form table {
width: 100%;
}
</style>
<![endif]-->
你可以使用许多黑客攻击(例如下划线黑客攻击),只允许你在你的样式表中定位IE,但如果你想在所有平台上定位所有版本的IE,它会变得非常混乱.
Ori*_*iol 50
除了IE条件注释之外,这是一个关于如何将IE6定位到IE10 的更新列表.
/***** Attribute Hacks ******/
/* IE6 */
#once { _color: blue }
/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }
/* Everything but IE6 */
#diecisiete { color/**/: blue }
/* IE6, IE7, IE8, but also IE9 in some cases :( */
#diecinueve { color: blue\9; }
/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }
/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */
/* IE8, IE9 */
#anotherone {color: blue\0/;} /* must go at the END of all rules */
/* IE9, IE10, IE11 */
@media screen and (min-width:0\0) {
#veintidos { color: red}
}
/***** Selector Hacks ******/
/* IE6 and below */
* html #uno { color: red }
/* IE7 */
*:first-child+html #dos { color: red }
/* IE8 (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }
/* Everything but IE6-8 */
:root *> #quince { color: red }
/* IE7 */
*+html #dieciocho { color: red }
/* IE 10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
#veintiun { color: red; }
}
San*_*lse 38
有几种可用于IE的黑客攻击
使用样式表的条件注释
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="only-ie.css" />
<![endif]-->
使用头部css的条件注释
<!--[if IE]>
<style type="text/css">
/************ css for all IE browsers ****************/
</style>
<![endif]-->
对HTML元素使用条件注释
<!--[if IE]> <div class="ie-only"> /*content*/ </div> <![endif]-->
使用媒体查询
IE10+
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
selector { property:value; }
}
IE6,7,9,10
@media screen and (min-width: 640px), screen\9 {
selector { property:value; }
}
IE6,7
@media screen\9 {
selector { property:value; }
}
IE8
@media \0screen {
selector { property:value; }
}
IE6,7,8
@media \0screen\,screen\9 {
selector { property:value; }
}
IE9,10
@media screen and (min-width:0\0){
selector { property:value; }
}
fro*_*guy 25
除了条件注释也可以使用CSS浏览器选择器http://rafael.adm.br/css_browser_selector/,因为这将允许您定位特定的浏览器.然后,您可以将CSS设置为
.ie .actual-form table {
width: 100%
}
这还允许您在主样式表中定位特定浏览器,而无需条件注释.
我认为,为了最佳实践,您应该在<head>标签内部编写IE条件语句,其中包含指向您的特殊样式表的链接.这是你的自定义CSS链接后,所以它覆盖后者,我有一个小网站,所以我使用相同的即所有页面的CSS.
<link rel="stylesheet" type="text/css" href="index.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->
这与我认为的詹姆斯答案不同(个人意见,因为我与设计师团队合作,我不希望他们触摸我的html文件并弄乱那里的东西)你不应该在你的html文件中包含样式.
这个有点晚了,但是当我试图隐藏IE6和7的背景时,这对我来说非常合适
.myclass{
background-image: url("images/myimg.png");
background-position: right top;
background-repeat: no-repeat;
background-size: 22px auto;
padding-left: 48px;
height: 42px;
_background-image: none;
*background-image: none;
}
我通过以下方式获得了这个黑客:http://briancray.com/posts/target-ie6-and-ie7-with-only-1-extra-character-in-your-css/
#myelement
{
color: #999; /* shows in all browsers */
*color: #999; /* notice the * before the property - shows in IE7 and below */
_color: #999; /* notice the _ before the property - shows in IE6 and below */
}
<script>
var BrowserDetect;
BrowserDetect = {...};// get BrowserDetect Object from the link referenced in this answer
BrowserDetect.init();
// On page load, detect browser (with jQuery or vanilla)
if (BrowserDetect.browser === 'Explorer') {
// Add 'ie' class on every element on the page.
$('*').addClass('ie');
}
</script>
<!-- ENSURE IE STYLES ARE AVAILABLE -->
<style>
div.ie {
// do something special for div on IE browser.
}
h1.ie {
// do something special for h1 on IE browser.
}
</style>
该Object BrowserDetect还提供version信息，以便我们可以添加特定的类-为前。$('*').addClass('ie9');如果(BrowserDetect.version == 9)。
祝好运....
对于 IE9+
@media screen and (min-width:0\0) and (min-resolution: +72dpi) {
// IE9+ CSS
.selector{
color: red;
}
}
浏览器边缘 12+
@supports (-ms-ime-align: auto) {
.selector {
color: red;
}
}
这个适用于 Edge 和所有 IE
:-ms-lang(x), .selector { color: red; }
| 归档时间： |
|
| 查看次数： |
321638 次 |
| 最近记录： |