相关疑难解决方法(0)

我有这个布局:

<div id="sectors">
    <h1>Sectors</h1>
    <div id="s7-1103" class="alpha"></div>
    <div id="s8-1104" class="alpha"></div>
    <div id="s1-7605" class="beta"></div>
    <div id="s0-7479"></div>
    <div id="s2-6528" class="gamma"></div>
    <div id="s0-4444"></div>
</div>

使用这些CSS规则:

#sectors {
    width: 584px;
    background-color: #ffd;
    margin: 1.5em;
    border: 4px dashed #000;
    padding: 16px;
    overflow: auto;
}

#sectors > h1 {
    font-size: 2em;
    font-weight: bold;
    text-align: center;
}

#sectors > div {
    float: left;
    position: relative;
    width: 180px;
    height: 240px;
    margin: 16px 0 0 16px;
    border-style: solid;
    border-width: 2px;
}

#sectors > div::after {
    display: block;
    position: absolute; …

我正在尝试为一个盒子创建一个样式,其阴影与文本的颜色相同.因为我有几个盒子,每个盒子都有不同的文字颜色,所以我想避免在每个盒子的每个单独的规则集中重复相同的颜色.

现在,Backgrounds和Borders模块指出for box-shadow(也适用于text-shadow):

哪里

<shadow> = inset? && [ <length>{2,4} && <color>? ]

Run Code Online (Sandbox Code Playgroud)

每个组件的组成部分<shadow>解释如下:

• ...

• 颜色是阴影的颜色.如果颜色不存在,则使用的颜色取自"颜色"属性.¹

这意味着如果您没有在给定元素上指定阴影颜色,则必须从为该元素计算的文本颜色中获取所使用的阴影颜色.这与没有明确颜色的边框相关联的行为类似,可以追溯到CSS1并在CSS2中保持不变.

但是,我知道阴影的情况并非总是如此 - 之前(2011年晚些时候!)所选择的颜色留给浏览器来决定文本模块和B&B模块.事实上,我记得过去的测试显示,有些浏览器选择了black其他浏览器,transparent或者完全忽略了阴影风格.这甚至可能在text-shadow和之间有所不同box-shadow.当然,这是可以理解的,因为如上所述,浏览器选择的任何颜色在当时都很好.

但是既然定义已经明确,所有浏览器的最新版本也反映了这一变化,那么我能做些什么来让旧版本效仿呢？我知道我可以多次指定颜色 - 一次用于文本,一次用于每个阴影 - 但就像我说的,如果可能的话我想避免这种情况.

¹ _{请注意,在2012年年中的WD中,这是本文撰写时的最新版本,同一部分的早期声明与此处引用的声明相矛盾,但此处引用的声明是规范的声明; 看到这个邮件列表主题和已经修复的ED.}

在调查关于清除漂浮物的这个问题时,我遇到了一个特殊的情况,边缘和间隙与非浮动的盒子.

根据规范第8.3.1节,任何一方都不应发生保证金崩溃

• 产生边距的至少一个元素是浮点数,或
• 通关是阻碍的.

但是,考虑一系列浮箱,其中最后一个清除其余的:

<div class="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

div.container > div {
    float: left;
    width: 50px;
    height: 50px;
    margin: 10px;
}

div.container > div:last-child {
    clear: left;
}

正如您所料,每个盒子之间的水平和垂直间隙都是20像素宽.垂直边距不会崩溃.

但是,当清除元素没有浮动时,它会向上跳10个像素,就好像它的上边距与其正上方的浮动边缘一样坍塌.

此行为完全违反了上面列出的两个条件:

1. 有通关.
2. 为了发生间隙,首先必须有一些其他浮子清除.清算单元本身没有浮动的事实不应该是相关的.

这种行为似乎在所有浏览器中都是一致的,包括不到最新版本的IE.

也就是说,我并没有像我的手背那样声称知道CSS浮动模型,所以......其他人可以解释为什么会发生这种情况吗？