ホームページ >ウェブフロントエンド >htmlチュートリアル >IE6 は 2 つの連続したクラスをサポートしていません。これを解決するにはどうすればよいですか? _html/css_WEB-ITnose
IE6 は 2 つの連続したクラスをサポートしていません。これを解決するにはどうすればよいですか? _html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-21 09:46:271174ブラウズ
<!doctype html><html> <head> <meta charset="gb2312" /> <title></title> <style> .i1 { font-size:21px; } .i2 { font-size:121px; } .i1.on { color:red; } .i2.on { color:blue; } </style> </head> <body> <span class="i1 on">我的颜色 有问题？</span> <span class="i2">我是垫背的</span> </body></html> 在ff中 是红色，没问题，这就是向要的效果，
但是 在ie6中 却是蓝色，求解，不改变结构，有办法解决吗？
回复讨论(解决方案)
.i2.on { color:blue; }
都没有这个class名啊
直接.i2就行了啊
直接.i2就行了啊
你没明白我的意思
<style> .i1 { font-size:21px; } .i2 { font-size:121px; } .on { color:red; } .on { color:blue; }</style> 写成这样
<!doctype html><html> <head> <meta charset="gb2312" /> <title></title> <style> .i1 { font-size:21px; } .i2 { font-size:121px; } .i1.on { color:red; } .i2.on { color:blue; } </style> </head> <body> <span class="i1 on">我的颜色 有问题？</span> <span class="i2 on">我是垫背的</span> </body></html>这样 意思 清楚点。。ff下 是对的 一个红 一个蓝可是 ie6下两个都是蓝。。高手支招，不改变结构，，怎么解决，，，ie6不支持 .i1.on { color:red; } 这样的写法？ 刚试了下，ie7、8 都和 ff 一样
唯独 ie6 不认识 .i1.on { 这样连续写的类选择 }
<!doctype html><html> <head> <meta charset="gb2312" /> <title></title> <style> .i1 { font-size:21px; } .i2 { font-size:121px; } .i1 .on { color:red; } .i2 .on { color:blue; } </style> </head> <body> <span class="i1"><span class="on">我的颜色 有问题？</span></span> <span class="i2"><span class="on">我是垫背的</span></span> </body></html> 话说，你指望用IE6去实现HTML5吗？ “ffd43448117c1013fbeeed3f564491ad”
楼主写的CSS跟HTML的使用，根本是混淆的。多看看CSS吧。
LZ没完全理解 css定义
参考 7楼正解
selector1,selector2 同时设置符合两种选择器的元素
selector1 selector2 设置符合selector1的元素的子元素中符合selector2的元素
楼主写的CSS跟HTML的使用，根本是混淆的。多看看CSS吧。
大侠，请你指出哪里混淆了？
.i1.on { color:red; }
.i2.on { color:blue; }
难道这不是 多类选择器么？
除了ie6，其他浏览器均支持。
selector1,selector2 同时设置符合两种选择器的元素
selector1 selector2 设置符合selector1的元素的子元素中符合selector2的元素
这个我明白，
比如
div.test
这个是指 35bfe00e9090f7a2d7a0c8cefbc22f6c16b28748ea4df4d9c2150843fecfba68 对吧
但是 上面的例子是 .a.b 这样的样式 9678c0fed9952a900f90016e75a04ff616b28748ea4df4d9c2150843fecfba68，ie6不支持这样的多类选择，其他浏览器均可以。
大家最好试试，不要光看，以为我是笔误把 .i1 .on 写成了 .i1.on 这里多个空格少个空格，差了远了去了。
ffd43448117c1013fbeeed3f564491ad
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
437809a3c5ffa720b255fa25ba24a114
b2386ffb911b14667cb8f0f91ea547a76e916e0f7d1e588d4f442bf645aedb2f
c9ccee2e6ea535a969eb3f532ad9fe89
#i1 { font-size:21px; }
#i2 { font-size:121px; }
#i1.on { color:red; }
#i2.on { color:blue; }
531ac245ce3e4fe3d50054a55f265927
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
2d4b2c6c77e5bfd24a3b5ccec1ffd7d6我的颜色 有问题？54bdf357c58b8a65c66d7c19c8e4d114
da72f05ecafb248c6a901190877bd42c我是垫背的54bdf357c58b8a65c66d7c19c8e4d114
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
这么写就可以 不能2个class连续 否则无解
ffd43448117c1013fbeeed3f564491ad
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
437809a3c5ffa720b255fa25ba24a114
b2386ffb911b14667cb8f0f91ea547a76e916e0f7d1e588d4f442bf645aedb2f
c9ccee2e6ea535a969eb3f532ad9fe89
#i1 { font-size:21px; }
#i2 { font-size:121px; }
#i1.on { color:red; }
#i2.on { color:blue; }
……
这样确实可以。
ie6不支持 多类啊。。。。
LZ没完全理解 css定义
参考 7楼正解
不知道是谁没理解 多类是很常见的写法
不过楼主IE6 应该是支持的吧？？我一直是这样写的没出过问题
<!doctype html><html> <head> <meta charset="gb2312" /> <title></title> <style> .i1 { font-size:21px; } .i2 { font-size:121px; } .i1.on{color:red!important; } .i2.on{color:blue; } </style> </head> <body> <span class="i1 on">我的颜色 有问题？</span> <span class="i2">我是垫背的</span> </body></html> 仔细的看了下你的代码是你的层叠的优先级问题 而不是不支持
各位评论的在说前仔细测试下谢谢 否则真的误人子弟了
HTML code
ffd43448117c1013fbeeed3f564491ad
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
437809a3c5ffa720b255fa25ba24a114
b2386ffb911b14667cb8f0f91ea547a76e916e0f7d1e588d4f442bf645aedb2f
c9ccee2e6ea535a969eb3f532ad9fe89
.i1 { font-size:21px; }
.i2 { font-size:121px; }
……
兄弟，很感谢你那么认真啊。
你确定 你一直 用多类 在ie6下 都没问题？
你看看这个
<!doctype html><html> <head> <meta charset="gb2312" /> <title></title> <style> .i1 { font-size:21px; } .i2 { font-size:121px; } .i1.on{color:red; } .i2.on{color:blue; } </style> </head> <body> <span class="i1 on">我的颜色 有问题？</span> <span class="i2 on">我是垫背的</span> </body></html> 这个是什么原因？
ie6 与 其他浏览器 独树一帜，两个都是蓝色，其他浏览器均为 一红一蓝。
看来 ie6 不认识多类，
.i1.on{color:red; }
.i2.on{color:blue; }
这样的格式
它只认 .on
所以就解析成了
.on{color:red; }
.on{color:blue; }
于是乎 两个都为蓝色 。。。。。。。。。。。。。。
来个高手 认同一下啊？
.i1.on { color:red; }
.i2.on { color:blue; }
改成
.i1 .on { color:red; }
.i2 .on { color:blue; }
父元素和子元素关系
ffd43448117c1013fbeeed3f564491ad 这个ie6肯定不支持了
.i1.on { color:red; }
.i2.on { color:blue; }
改成
.i1 .on { color:red; }
.i2 .on { color:blue; }
父元素和子元素关系。好像一般不会这样写
ffd43448117c1013fbeeed3f564491ad 这个ie6肯定不支持了
但是.on怎么区分呢？这样还有优先级问题
引用 17 楼 nx8823520 的回复:
HTML code
ffd43448117c1013fbeeed3f564491ad
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
437809a3c5ffa720b255fa25ba24a114
b2386ffb911b14667cb8f0f91ea547a76e916e0f7d1e588d4f442bf645aedb2f
c9ccee2e6ea535a969eb3f532ad9fe89
.i1 { font-size:21px; }
.i2 { font-size:121px; }
……
兄弟，很感谢你那么认真啊。
你确……
仔细的测试了下好像真是这样，估计以前多态类的定义，最后的那个class都是一个特殊的所有没发现问题，道个歉吧。。。。果真自己误人子弟了！！哎！！！
对于多态类ffd43448117c1013fbeeed3f564491ad声明去掉后，IE解析的都是最后的class应用样式前面的给筛选掉了！
<!doctype html><html> <head> <meta charset="gb2312" /> <title></title> <style> body{color:#000;} .i1 {font-size:21px; } .i2 {font-size:121px; } .i2.on,.parent .on.i2{color:blue;}/*针对IE6特效颠倒顺序提高层叠特殊对待*/ .i1.on{color:red; } </style> </head> <body> <div class="parent"> <span>我是默认颜色</span> <span class="i1 on">我的颜色 有问题？</span> <span class="i2 on">我是垫背的</span> <div> </body></html> HTML code
ffd43448117c1013fbeeed3f564491ad
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
437809a3c5ffa720b255fa25ba24a114
b2386ffb911b14667cb8f0f91ea547a76e916e0f7d1e588d4f442bf645aedb2f
c9ccee2e6ea535a969eb3f532ad9fe89
body{color:#000;}
.i1 {font-size:21px; }
……
很高兴有师兄你这么热心的朋友。
但是我谈谈我的观点：
师兄你是这么写的
.i1 {font-size:21px; } .i2 {font-size:121px; } .i2.on,.parent .on.i2{color:blue;}/*针对IE6特效颠倒顺序提高层叠特殊对待*/ .i1.on{color:red; } 话说 ie6 会这么解析
.i1 {font-size:21px; } .i2 {font-size:121px; } .on, .parent .i2{color:blue;} .on{color:red; } 此时
da5c098b9573ddafc409cba36f18a8af我的颜色 有问题？54bdf357c58b8a65c66d7c19c8e4d114
7c27e5c7d8aa747193d322dc5733afe6我是垫背的54bdf357c58b8a65c66d7c19c8e4d114
i1 为红色，i2为蓝色是无可厚非的，
利用的 选择器 优先级别，
.on都是红色,但是 .parent .i2 的优先级 高于 .on ，所以 i2 为蓝色。
虽然效果 是达到了，但是 师兄你考虑过没有，此时7c27e5c7d8aa747193d322dc5733afe6我是垫背的54bdf357c58b8a65c66d7c19c8e4d114 中 .on 不是多次一举了吗?
引用 22 楼 nx8823520 的回复:
HTML code
ffd43448117c1013fbeeed3f564491ad
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
437809a3c5ffa720b255fa25ba24a114
b2386ffb911b14667cb8f0f91ea547a76e916e0f7d1e588d4f442bf645aedb2f
c9ccee2e6ea535a969eb3f532ad9fe89
body{color:#000;}
.i1 {font-size:21px; }
……
很高兴有师兄你这么热心的朋友。
但是我谈谈我的观……
这个仅仅是针对特殊情况的特殊对待，你转牛角尖了，怎么会多此一举呢？？针对这个例子确实有点多此一举，你有没想过2个class为什么要都有？
说个普遍的例子，鼠标移入特效，这个时候我需要移入的时候置入一个class去改变背景图片或者突出这个dom节点，不过我又要保留它部分默认的原有样式，这样的话那他原有的class存在还多余吗？？？
其实这样的东西你知道原理 知道问题所在解决它了 那那就该移开目光做点其他的事了，在继续深入没有意义，IE6始终会给淘汰，在完美的hack始终是hack
引用 23 楼 ootwo 的回复:
引用 22 楼 nx8823520 的回复:
HTML code
ffd43448117c1013fbeeed3f564491ad
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
437809a3c5ffa720b255fa25ba24a114
b2386ffb911b14667cb8f0f91ea547a76e916e0f7d1e588d4f442bf645aedb2f
c9ccee2e6ea535a969eb3f532ad9fe89
body{color:#000;}
.i1 {font-size:21px; }
……
很高兴有……
呵呵，有时我确实是 钻牛角尖， 遇到这种问题，我就想 弄明白。
这个问题 也是在实际运用中遇到的
比如
<!doctype html><html> <head> <meta charset="gb2312" /> <title></title> <style> ul { width:200px; } li { border:1px solid #999; margin-top:5px; cursor:pointer; font-weight:bold; color:#999; } .c1 { font-size:80px; } .c2 { font-size:60px; } .c3 { font-size:40px; } .c1.current { color:red; } .c2.current { color:green; } .c3.current { color:blue; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> </head> <body> <ul> <li class="c1 current">1-1</li> <li class="c2">1-2</li> <li class="c3">1-3</li> </ul> <script> $('li').click(function(){ $(this).addClass('current').siblings().removeClass('current'); }) </script> </body></html> 这个例子，ff下 点击 每个li 颜色不同，但在ie6下 就出现了 上述 多类的问题。
如果不从dom、script，只从css中 改这个例子，就是上面说的问题了。
LZ 你仔细看下ID和CLASS的区别
不是说你的这种写法有错误，但是的确不规范，才造成了你现在的困惑
就是通过各种手段 硬把IE6熬成了你所需要的样子 这并不是一劳永逸的最佳手段 下次遇到同样的问题 又会发生困惑了
ID是表示着标签的身份，在JS脚本中会用到id，当JS要修改一个标签的属性时，JS会将id名作为该标签的唯一标识进行操作。也就是说ID只是页面元素的标识，供其他元素脚本等引用。假如你的页面里出现了两个ID那JS效果特性较出现逻辑错误不知道依据哪个ID来改变其标签属性。 在CSS里的ID不一定为JS而设置的，但是同样ID在页面里也只能出现一次，并且是唯一性。虽然可能我们才学DIV+CSS爱好者在一个页面里同时调用相同的ID多次但是仍然没有出现页面混乱错误，但是我们为了W3C及各个标准我们也要遵循ID在一个页面里唯一性。以免出现浏览器兼容问题。
Class 在程序中称“类”，同时在CSS中也书面语也叫“类”。在CSS样式中以小写的“点”及“.”来命名如： .css5{属性：属性值;} ,而在html页面里则以class="css5" 来选择调用,命名好的CSS又叫css选择器。如： .css5{属性：属性值;} 选择器在html调用为“4b5f747d4fa62668369fad4009be20c4我是class例子16b28748ea4df4d9c2150843fecfba68 "CSS の参照方法がわからない場合は、CSS 参照について学ぶことができます。
そして、クラスは同じ HTML ページ上で同じクラスを何度も呼び出すことができます。この例では、対応する Web ページで使用できます。 「css5」は何度も呼び出して選択できます。これは、css で事前に設定された属性を呼び出すためにクラスが一般的に使用されることも示しています。たとえば、「.class01{attribute: 属性値;}」のような事前設定された属性があります。この方法では、関数を呼び出す場合と同じように、Web ページで「class」属性を繰り返し構成する必要はなく、クラス選択を記述するだけで、同じ CLASS クラスを呼び出して選択できます。同じページ内のどこにでも
http://www.divcss5.com/rumen/r3.html これは元のアドレスです
http://www.crazyleaves.com/css%E5%A4%9A %E7%B1%BB%E9 %80%89%E6%8B%A9%E5%99%A8/
こんな段落があります
IE6 では、.d.controla と .d.controlb が書かれていると逆にすると、.controla.d と .controlb.d になります。最後に、w3school のページの下部に、次のような答えが見つかりました。 重要: IE7 より前のバージョンでは、異なるプラットフォームの Internet Explorer は動作しません。正しくは
同じ調査です
http://www.crazyleaves.com/css%E5%A4%9A%E7%B1%BB%E9%80%89%E6%8B%A9%A8。 /
こんな段落があります
IE6 では、.d.controla と .d.controlb を逆に書いて .controla.d と .controlb.d になると、奇妙な問題が発生します やあ、やっと見つけました。 w3schoolのとあるページの一番下にある答え…
さて、それが問題です
25階の例はCSS面からは変更できず、クリック時にjsで動的に変更するしかないようです変更します。
効果を実現するには、単純な説明を使用する必要はないと思います。 font-size:121px; color:blue;}
上にはたくさんのメソッドがあります。 ！
効果を得るために、元の投稿者が書いたようなスタイルである必要はないと思います。
.i1 { font-size:21px;color:red; }
これは、実際にフォント サイズを設定するだけではありません。色は .on
(⊙o⊙)…, 投稿者が書いたことは基準と非常に一致していますが、なぜ多くの人が投稿者を「理解できなかった」「理解できなかった」と言っているのでしょうか？
IE6 がサポートしていないだけです。 http://www.w3school.com.cn/css/css_selector_class.asp
こんなこと書く必要もない、自分を過大評価している人がたくさんいます。私は今、この方法でしか解決できない状況に遭遇しました。なんとも憂鬱だ。
IE7 より前のバージョンはマルチタイプ セレクターをサポートしていないため、IE6 の .i1.on および .i2.on は認識されません。
あなたの例では、.i1.on は IE6 では .on のみを認識するため、.i1.on と .i2.on は .on とみなされ、最後に .i2.on が表示されるため、 で表示されます。青
回答された質問の多くは初心者のものです。継承とは何か知っていますか？誤解を招きますが、このように書くことでスペース、コードの再利用率、ページのレンダリング速度が大幅に削減されるとは知りません。混乱していますが、なぜこれほど混乱した答えがたくさんあるのでしょうか? IE6 はこの記述方法をサポートしていませんが、最新のブラウザーはすべてサポートしています。
重要: IE7 より前のバージョンでは、さまざまなプラットフォーム上の Internet Explorer がマルチタイプ セレクターを正しく処理できませんでした。