【发布时间】：2012-02-13 03:04:20
【问题描述】：
全部，
这似乎是与 Firefox 相关的问题（没有尝试过 Opera 和 IE）。
我有 'ul' 孩子，它们在液体布局中被赋予 100% 的宽度。父 'li' 本身的宽度是其父 'ul' 的 33%。
Chrome 似乎正确显示了子 'ul' 的宽度，即它的 100% 等于它的父 'li' 宽度的 33%。但是，Firefox 会将 'ul' 子项的宽度拉伸到整个视口宽度。
Jsfiddle：http://jsfiddle.net/g4VAd/2/
<div id="filemenu"> <!-- right tabs menu -->
<ul id="fm_ul">
<li class="filetabs">File
<ul>
<li class="m_items">Open</li>
<li class="m_items">Save</li>
<li class="m_items">Exit</li>
</ul></li><li class="filetabs">Edit
<ul>
<li class="m_items">Undo</li>
<li class="m_items">Redo</li>
</ul></li><li class="filetabs">Settings
<ul>
<li class="m_items" id="frontView"><span>Front View</span></li>
<li class="m_items"id="backView"><span>Back View</span></li>
</ul></li>
</ul>
</div> <!-- close -> 'filemenu' div -->
CSS：
#filemenu {
float: right;
width: 37%;
height: 100%;
}
#fm_ul {
float: right;
display: table;
width: 100%;
height: 100%;
cursor: pointer;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px; /* Opera & IE9 donot have prefixes, directly support border-radius */
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.1);
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.1);
box-shadow: 0 1px 2px rgba(0,0,0,0.1); /* Opera & IE9 donot have prefixes, directly support border-radius */
background: rgb(232,232,232); /* Old browsers */
background: -moz-linear-gradient(top, rgb(232,232,232) 0%, rgb(252,252,252) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(232,232,232)), color-stop(100%,rgb(252,252,252))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgb(232,232,232) 0%,rgb(252,252,252) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgb(232,232,232) 0%,rgb(252,252,252) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgb(232,232,232) 0%,rgb(252,252,252) 100%); /* IE10+ */
background: linear-gradient(top, rgb(232,232,232) 0%,rgb(252,252,252) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8e8e8', endColorstr='#fcfcfc',GradientType=0 ); /* IE6-8 */
}
.filetabs {
display: table-cell;
position: relative;
width: 33%;
height: 100%;
color: rgb(125,125,125);
font-size: 0.8em;
line-height: 25px;
text-align: center;
text-decoration: none;
-moz-text-shadow: 0 1px 2px rgba(150,150,150,0.4);
-webkit-text-shadow: 0 1px 2px rgba(150,150,150,0.4);
text-shadow: 0 1px 2px rgba(150,150,150,0.4);
vertical-align: middle;
list-style-type: none;
}
.filetabs:first-child {
-webkit-border-top-left-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-bottomleft: 6px;
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
.filetabs:last-child {
-webkit-border-top-right-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
-moz-border-radius-topright: 6px;
-moz-border-radius-bottomright: 6px;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
.filetabs:hover {
color: rgb(150,150,150);
-moz-text-shadow: 0 1px 0 rgba(255,255,255,0.95);
-webkit-text-shadow: 0 1px 0 rgba(255,255,255,0.95);
text-shadow: 0 1px 0 rgba(255,255,255,0.95);
}
.filetabs ul {
display: none;
float: left;
position: absolute;
width: 100%;
opacity: 0;
-webkit-transition: 0.35s linear opacity;
-moz-transition: 0.35s linear opacity;
-o-transition: 0.35s linear opacity;
transition: 0.35s linear opacity;
z-index: 100;
}
.m_items {
width: 100%;
list-style: none;
padding-top: 1px;
background-color: rgba(1,1,1,0.8);
-moz-box-shadow: 2px 0 2px rgba(1,1,1,0.2);
-webkit-box-shadow: 2px 0 2px rgba(1,1,1,0.2);
box-shadow: 2px 0 2px rgba(1,1,1,0.2);
}
.m_items span {
font-size: 0.8em;
cursor: default;
}
.m_items:first-child { /* for borders */
-moz-border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
}
.m_items:last-child { /* for borders */
padding-bottom: 5px;
-moz-border-radius: 0 0 4px 4px;
-webkit-border-radius: 0 0 4px 4px;
border-radius: 0 0 4px 4px;
}
【问题讨论】：
-
它在 Safari 中也不能正常工作。我现在正在寻找问题。
标签： html css width liquid-layout