Home >Web Front-end >HTML Tutorial >IE7 and 8 chrome are displayed on one line, and IE6 is displayed on two lines. How to modify it_html/css_WEB-ITnose
IE7 and 8 chrome are displayed on one line, and IE6 is displayed on two lines. How to modify it_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:10:051601browse
The code is like this:
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><style>.row p,.row span{ font-size:14px; line-height:22px; color:#5e5e5e; display:block; float:left;}.span7 { width: 400px;}.span9 { width: 520px;}.row > [class*="span"] { display: inline; float: left; margin-left: 20px;}</style></head><body> <div class="row"> <div class="span9"> <h2>云DNS</h2> <p>DNSPod拥有全球最领先的云 DNS 集群技术。6年 DNS 领域专业研究，无数次紧急 DNS 故障处理，让我们更有信心提供最好的服务。</p> </div> <div class="span7"> <img style="margin-left:-20px;" src="https://www.dnspod.cn/yantai/img/content/features/feature1.jpg"> </div> </div> </body></html> It can be displayed the same in IE7 and 8 chrome, but it is displayed in two lines in IE6. How to modify it?
In addition, what does .row > [class*="span"] here mean? Only 64 points, all contributed, thank you
Reply to the discussion (solution)
.row > [class*="span"]
All divs with class names beginning with span below the div with class name row
Haha, I didn’t express myself clearly just now, and now I want to edit the post but I can’t.
That’s it, the above code It can be displayed the same in IE7 and 8 chrome, but it is displayed in two lines in IE6. How to modify it so that it can be displayed the same in IE6.
Thank you
.row > [class*="span"]
This is how to write css3, and ie6 does not support css3, so the attributes inside do not work.
After referring to the tx isd css3 manual, we get:
[class*="span"] means: select the class containing the word span in the class.
In this article, they are: span7 and span9.
And > No relevant explanation was found in the css3 manual. According to the description on sharp jquery (page 36), refer to the explanation of the description of jquery selector. This is:
sub-selector, which is different from .a .b. .a .b is all .b under class a, And .a>.b is, there is only one level .b below .a. The popular understanding is that we only look for sons, not grandchildren.
Wow, I didn’t express myself clearly just now. Now I want to edit the post but I can’t.
That’s it, the above code can be displayed the same in IE7 and 8 chrome, but it can be displayed in two parts in IE6 Row display, how to modify it so that it can be displayed the same under IE6.
Thank you
It’s very simple to throw away the pile just now and change it to:
.row .span7,.row .span9
After change:
.row p,.row span{ font-size:14px; line-height:22px; color:#5e5e5e; display:block; float:left;}.span7 { width: 400px;}.span9 { width: 520px;}.row .span7,.row .span9 { display: inline; float: left; margin-left: 20px;} [class*="span"] means: select the class containing the word span in the class.
This sentence is more precise:
matches elements with class attribute and containing 'span' in the value.
Quote from the 2nd floor’s reply:
Wow, I didn’t express myself clearly just now, and now I want to edit the post but I can’t.
That’s it, the above code works in IE7 and 8 chrome It can be displayed the same, and it is displayed in two lines in IE6. How can I modify it so that it can be displayed the same in IE6.
Thank you
It’s very simple to throw away the pile just now and change it to:
.row .span7,.row .span9
After change:
CSS code
.row p,.row span{
fo……
Thank you!