css怎么继承父集宽度,CSS - 孩子不继承父的宽度液态布局

这似乎是火狐相关的问题(还没有尝试歌剧& IE)。

我有'ul'儿童在液体布局中给予100％的宽度。父'李'本身的宽度为其父'ul'的33％。

Chrome似乎正确显示了子'ul'的宽度，即它的100％等于它的父'li'宽度的33％。但是，Firefox会将'ul'子元素的宽度拉伸到完整的视口宽度。

• File
  • Open
  • Save
  • Exit
• Edit
  • Undo
  • Redo
• Settings
  • Front View
  • Back View

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;

}

2012-02-13

Kayote

+0

这不是在Safari中正常工作无论是。我现在正在查找这个问题。 –

2012-02-13 03:30:28