As we all know, FF and Opera, the other browsers that follow the CSS2 standard, have long been supported because of the improved version:
Display:table
Dispaly:table-cell
Dispaly:table-row
Dispaly:table-row-group
Dispaly:table-column
Dispaly:table-column-group
and other properties.
(At least ff1.0,opera7 can support it, the previous one is not so clear) then what's the hesitation? Let's get started (add some padding and border for the demo):
<textarea id="code"><! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "><ptml xmlns=" http://www.w3.org/1999/xhtml "><pead><meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/><title>normal</title><style type=" text/css "><!--*{margin:0px; padding:0 px;} #d {display:table; margin:0 auto; background: #0cf; padding:10px; width:80%; border:1px solid #f00;} #d ul{Display:table-row-group;} #d li{Display:table-cell; list-style:none; border:1px solid #333; background:red; text-align:center;} --></style></pead><body><div id= "D" > <ul> <li>aaa</li> <li>aaa& lt;/li> <li>aaa</li> <li>aaa</li> <li>aaa</li> </ul></div>< ;/body></ptml></textarea>
Run codeCopy CodeSave CodeCollect this pageIE does not support this effect, FF and opera under look.
The example above defines the
| #d { display:table; } #d ul{ Display:table-row-group; } #d li{ Display:table-cell; } |
| <tabel> <tr> <td> |
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "><ptml xmlns=" http://www.w3.org/1999/xhtml "><pead><meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/><title>normal</title><style type=" text/css "><!--*{margin:0px; padding:0 px;} #d {display:table; margin:0 auto; background: #0cf; padding:10px; width:799px; border:1px solid #f00;} #d ul{Display:table-row-group;} #d li{Display:table-cell; list-style:none; border:1px solid #333; background:red; text-align:center;} --></style></pead><body><div id= "D" > <ul> <li>aaa</li> <li>aaa& lt;/li> <li>aaa</li> <li>aaa</li> <li>aaa</li> </ul></div>< ; script type= "Text/javascript" >var D=document.getelementbyid ("D"); var c=d.getelementsbytagname ("Li"); var l= C.length;for (var i=0;i<l;i++) alert (C[I].OFFSETWIDTH) </script></body></ptml>
Run codeCopy CodeSave CodeCollect this page
This is not a test in IE, I did not add non-IE decision, stole a lazy.
Since both FF and opera are based on the above principles to explain this kind of table-like style, ie does not support, why not set a similar interpretation mechanism for it?
Let's look at what we can do with IE:
<textarea id="code3"><! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "><ptml xmlns=" http://www.w3.org/1999/xhtml "><pead><meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/><title>normal</title><style type=" text/css "><!--*{margin:0px; padding:0 px;} body{Text-align:center;} #d {display:table; margin:0 auto; background: #0cf; padding:10px; width:799px; border:1px solid #f00;} #d ul{Display:table-row-group;} #d li{Display:table-cell; list-style:none _float:left; width:158px; border:1px solid #333 background:red; Text-align: Center;} --></style></pead><body><div id= "D" > <ul> <li>aaa</li> <li>aaa& lt;/li> <li>aaa</li> <li>aaa</li> <li style= "width:157px" >aaa</li> </u L></div></body></ptml></textarea>
Run codeCopy CodeSave CodeCollect this page
#d Li is defined here to float to the left, and also to define their width (note: This is because the border is set to 1px, Width is 158px). In order to prevent the Ff/opera recognition floating, use the _float:left;
ok--this time can be tested in IE--pretty perfect! Of course, Ff/opera, of course. To this, if you think the problem is solved, and you usually do it-then you can close the topic now, you should be busy what busy!
However, the problem is when we set the width of the #d to 798px? -then give the second #d Li a style to set the width width:157px. If you reset the width of the #d to 797px, 796px ... It? (Maybe you're not going to be able to move these widths when you design a page) but the trouble is that if the number of nodes in #d Li needs to be adjusted--that we tend to increase or decrease this sort of navigation list in our daily web development and maintenance, do you want to recalculate and set the width of these #d li separately?
It's not such a hassle, my math isn't that bad--maybe you would say.
But the real trouble is: when we do a percentage of the page and the design of the horizontal navigation, the width of these #d Li how to set it? Or the example is king, the following is just a small change to the example above, fortunately 5 #d li nodes, exactly each width is 20%:
<textarea id="code4"><! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "><ptml xmlns=" http://www.w3.org/1999/xhtml "><pead><meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/><title>normal</title><style type=" text/css "><!--*{margin:0px; padding:0 px;} body{Text-align:center;} #d {display:table; margin:0 auto; background: #0cf; padding:10px; width:80%; border:1px solid #f00;} #d ul{Display:table-row-group;} #d li{Display:table-cell; list-style:none _float:left; width:20%; border:1px solid #333 background:red; Text-align: Center;} --></style></pead><body><div id= "D" > <ul> <li>aaa</li> <li>aaa& lt;/li> <li>aaa</li> <li>aaa</li> <li>aaa</li> </ul></div>< ;/body></ptml></textarea>
Run codeCopy CodeSave CodeCollect this page
The test seems to be good too, and there seems to be nothing wrong with it (it may be broken on some machines). Then adjust the resolution to see--or very good AH (may be on some machines will be folded line)! So you're trying to shrink the IE window (not minimize to the taskbar), if it's normal (believe that some friends ' navigational effects are already on the line)--I'll get you frustrated. Put your mouse on the right side of the smaller IE window, Gradually gradually drag the zoom IE window--Needless to say, many friends must have already understood that the original, here long-winded is mainly for some not understand the new, the old people ignore this paragraph simply say:
The percentage width of the #d set in the example above is 80%, so this width will naturally change with the change of IE window size, if the adjusted IE window is 999, then the actual width of this #d is 792, this width naturally cannot be divisible by the number of nodes of #d Li, that is 20% Width is not an integer (the browser shows the smallest unit is 1 pixels, can not be divided, may be rounded), it will naturally appear #d Li width and greater than the actual width of the #d resulting in a folding phenomenon.
Oh, my God! Almost forgot, above #d Li defined border as 1px, then #d Li's width sum for 100%+10px, hurriedly remove and try again-this time seems to be OK, never appear above phenomenon, ie does not seem to the actual width of #d Li to rounding algorithm. Is there no additional setting for #d Li's border and padding?
And the worst of it is:
If the number of nodes for #d Li is 3/7/9/11 ... And so on, you can't evenly divide the value of #d width, you have to set the percentage of each #d Li separately, so that their sum equals 100%. And there's no extra setup for #d Li's border and padding.
In addition: In the #d width of the fixed size, set the #d Li as a percentage, sometimes there will be some problems you do not want to see, I believe many friends have encountered. If you don't know, you can try it yourself.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
