i confess. my google search was: inline-table bugs. but that didn’t end up as expected. i actually came across another thing.
[URL=“http://www.richinstyle.com/guides/tables2.html#display”]Note as well that since every table element requires a table, a cell and a row, where one or more of these is missing, the others are implied around it and all similar consecutive sibling elements (e.g., where there are consecutive table rows, a single table will be implied around all of them).
<DIV style=“display: table-cell”>
</DIV>
<DIV style=“display: table-cell”>
</DIV>
The above example would have a table and a table row implied around it.
given the last css quiz, where ds60, once again, mentions table-cell:
the natural observation is: why target the parent with css alterations when you can target the initial subjects: child elements. because the <ul> and <li>s may be cut down to on level <div>s. what that means: another <div> to act as a container for those <div>s like <ul> does for <li>s. not good.
targeting <li> with display:table-cell is the generalized solution for good browsers. i doesn’t generate additional problems: white space bugs.
for ie6-7, no changes: display:inline with * hacks.
i believe the answer is indeed this: inline-block is useless. and since the problem was the use of inline-block in the first place, the answer is always replace it with table-cell.
done. font-size:0 is not needed since there is no white space bug.
proof. i didn’t put ie6-7 hacks there to keep it clean and clear.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en" dir="ltr"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Language" content="en">
<style type="text/css">
ul {
padding:0;
}
div, li {
height:50px;
width:100px;
display:table-cell;
border:1px solid red;
}
</style>
</head><body>
<div>one</div>
<div>two</div>
<div>three</div>
<div>four</div>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
</ul>
</body></html>