如何调整CSS以在IE 6中正确显示？ [英] How to adjust CSS to display correctly in IE 6?

问题描述

我有以下HTML + CSS，可以在IE 6作为Web浏览器的少数旧版Windows XP上显示。在较新的浏览器上，它应如下所示：

但IE 6看起来像这样：

所以我很好奇我是否可以尝试为IE 6修复此问题？

html：

 < span id =lbl01>用户命令：< / span> 
< div class =divSmBtns> 
< a href =＃id =idBtndraggable =falseclass =smtbBtnCopy smtbBtntitle =whatever>< / a> 
< / div> 
  

Css：

  .divSmBtns {
保证金：-10px 10px 0px 8px; 
填充：0px; 
显示：inline-table; 
} 
 .smtbBtnCopy {
 background-image：url（copy.gif）; 
} 
 .smtbBtn {
宽度：12px; 
身高：10px; 
保证金：0px; 
填充：1px; 
 background-size：6px; 
 background-repeat：no-repeat; 
 background-color：transparent; 
 border：1px solid transparent; 
 display：inline-block; 
背景位置：中心; 
游标：指针; 
 box-sizing：border-box; 
 outline：none; 
} 
 .smtbBtn：悬停{
 border：1px solid #ccc; 
} 
 .smtbBtn：有效{
背景大小：5px; 
} 
  

解决方案

为了支持IE6，你需要对你的加价做出一些妥协，并保持简单。

正如我在评论中所说，有两个问题。

1. IE6中不支持display：inline-table 。在IE6中不支持使用 display：inline;


2. background-size 。使用 img 代替背景图片。

一个非常简单的解决方案要删除 div 包装 a ，而是使用 a 包装 img 。这样的事情：

 < span id =...>用户命令：< / span> 
< a href =＃id =...class =smtbBtntitle =...> 
< img src ='...'alt ='...'/> 
< / a> 
  

然后，将该图片用于您的悬停互动：

  .smtbBtn {vertical-align：middle; } 
 .smtbBtn img {height：14px;边框：1px固体透明; } 
 .smtbBtn：hover img，。smtbBtn：active img {
 border：1px solid＃f00; 
} 
  

这将适用于所有浏览器，包括现代浏览器以及IE浏览器回到IE5。

演示小提琴： https://jsfiddle.net/abhitalks/mcgLkdc9/6/embedded/result/

Snippet ：

  .smtbBtn {vertical-align：middle; } .smtbBtn img {height：14px;边框：1px固体透明; } .smtbBtn：hover img，.smtbBtn：active img {border：1px solid＃f00; }  

 < span id =lbl01> User命令：< / span>< a href =＃id =idBtndraggable =falseclass =smtbBtnCopy smtbBtntitle =Copy> < img src ='http：//i.stack.imgur.com/6cALN.gif'alt =''/>< / a>  

---

编辑：

As有人指出，对于 border-color ，IE6不支持透明，你将不得不诉诸黑客或条件评论（，如其他答案所示）。

1. Hack ：您可以通过 _ （下划线）为属性添加前缀，该内容仅由IE6识别并被其他浏览器忽略。类似地，前缀为 * （星号）只能由IE7识别。

CSS：

  .smtbBtn img {height：14px;边框：1px固体透明; } 
 .smtbBtn img {_border-color：pink; _filter：chroma（color = pink）; } 
  

小提琴2： https://jsfiddle.net/abhitalks/mcgLkdc9/8/embedded/result/

2. 条件评论 ：您可以使用条件评论来注入HTML，例如在您的情况下 img 标记具有这些样式的特定类。请记住条件注释用于HTML而不是CSS。

标记：

 < a href =＃id =idBtndraggable =falseclass =smtbBtnCopy smtbBtntitle =Copy> 
<！ -  [if IE 6]> 
< img src ='http：//i.stack.imgur.com/6cALN.gif'class ='ie6img'alt =''/> 
<！[endif]  - > 
<！ -  [if gte IE 7]> 
< img src ='http：//i.stack.imgur.com/6cALN.gif'alt =''/> 
<！[endif]  - > 
<！ -  [if！（IE）]><！ - > 
< img src ='http：//i.stack.imgur.com/6cALN.gif'alt =''/> 
<！ - <！[endif]  - > 
< / a> 
  

CSS：

  .smtbBtn img {height：14px;边框：1px固体透明; } 
 .ie6img {
 border-color：pink; filter：chroma（color = pink）; 
} 
  

小提琴3： https://jsfiddle.net/abhitalks/a9f80cqf/4/embedded/result/

注意：我没有在IE6中测试过上述两种方法。我在IE11中使用开发人员工具模拟。这意味着，您必须根据自己的经验进行调整。

I have the following HTML+CSS that may be displayed on some small number of older Windows XP machines with IE 6 as a web browser. On a newer browser it should look like this:

but IE 6 makes it look like this:

So I was curious if there's anything I can do to try to fix this for IE 6?

Here's a fiddle to show the code.

The image used was this:

html:

<span id="lbl01">User Commands:</span>
<div class="divSmBtns">
<a href="#" id="idBtn" draggable="false" class="smtbBtnCopy smtbBtn" title="whatever"></a>
</div>

Css:

.divSmBtns{
    margin: -10px 10px 0px 8px;
    padding: 0px;
    display: inline-table;
}
.smtbBtnCopy{
    background-image: url(copy.gif);
}
.smtbBtn{
    width: 12px;
    height: 10px;
    margin: 0px;
    padding: 1px;
    background-size: 6px;
    background-repeat: no-repeat;
    background-color: transparent;
    border: 1px solid transparent;
    display: inline-block;
    background-position: center center;
    cursor: pointer;
    box-sizing: border-box;
    outline: none;
}
.smtbBtn:hover{
    border: 1px solid #ccc;
}
.smtbBtn:active{
    background-size: 5px;
}

解决方案

In order to support IE6, you will need to make some compromises with your mark-up and keep it simple.

As I said in the comments, two problems.

1. display: inline-table is not supported in IE6. Use display: inline;
2. background-size is not supported in IE6. Use an img instead of a background image.

A very simple solution would be to remove the div wrapping your a, and instead use the a to wrap an img. Something like this:

<span id="...">User Commands:</span>
<a href="#" id="..." class="smtbBtn " title="...">
    <img src='...' alt='...' />
</a>

And then, use that image for your hover interactions:

.smtbBtn { vertical-align: middle; }
.smtbBtn img { height: 14px; border: 1px solid transparent; }
.smtbBtn:hover img, .smtbBtn:active img { 
    border: 1px solid #f00; 
}

That will work well across all browser including the modern ones as well as IE going back to IE5.

Demo Fiddle: https://jsfiddle.net/abhitalks/mcgLkdc9/6/embedded/result/

Snippet:

.smtbBtn { vertical-align: middle; }
.smtbBtn img { height: 14px; border: 1px solid transparent; }
.smtbBtn:hover img, .smtbBtn:active img { 
    border: 1px solid #f00; 
}

<span id="lbl01">User Commands:</span>
<a href="#" id="idBtn" draggable="false" class="smtbBtnCopy smtbBtn" title="Copy">
    <img src='http://i.stack.imgur.com/6cALN.gif' alt='' />
</a>

---

Edit:

As was pointed out that IE6 will not support transparent for border-color, you will have to resort to either hacks or conditional comments (as suggested in the other answer).

1. Hack: You could prefix a property by _ (underscore) which will be recognized only by IE6 and ignored by other browsers. Similarly prefixing with an * (asterisk) will be recognized only by IE7.

CSS:

.smtbBtn img { height: 14px; border: 1px solid transparent; }
.smtbBtn img { _border-color: pink; _filter: chroma(color=pink); }

Fiddle 2: https://jsfiddle.net/abhitalks/mcgLkdc9/8/embedded/result/

2. Conditional comments: You could use conditional comments to inject HTML i.e. in your case an img tag with a specific class for those styles. Remember that conditional comments are used for HTML not CSS.

Markup:

<a href="#" id="idBtn" draggable="false" class="smtbBtnCopy smtbBtn" title="Copy">
    <!--[if IE 6]>
        <img src='http://i.stack.imgur.com/6cALN.gif' class='ie6img' alt='' />
    <![endif]-->
    <!--[if gte IE 7]>
        <img src='http://i.stack.imgur.com/6cALN.gif' alt='' />
    <![endif]-->
    <!--[if !(IE)]><!-->
        <img src='http://i.stack.imgur.com/6cALN.gif' alt='' />
    <!--<![endif]-->
</a>

CSS:

.smtbBtn img { height: 14px; border: 1px solid transparent; }
.ie6img {
    border-color: pink; filter: chroma(color=pink);
}

Fiddle 3: https://jsfiddle.net/abhitalks/a9f80cqf/4/embedded/result/

Note: I have not tested the above two methods in IE6. I am using developer tools emulation in IE11. Which means, you will have to tweak that based on your experience.

这篇关于如何调整CSS以在IE 6中正确显示？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！