Question

我有以下简单的HTML结构：

<section id="teasers">
        <div class="wrapper">
            <a href="">
                <div class="redbox">
                    <h2 class="two-lines uppercaseme lowercaseme">Behind the Scenes<br/>
                        <span class="lowercaseme">A look at studio life</span>
                    </h2> 
                    <div class="clearfix"></div>
               </div>
           </a>
       </div>
</section>

并应用了以下CSS：

.redbox {
    padding: 0 55px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

#teasers h2 {
    float: left;
    margin: 7% 0;
}

该错误似乎是 HERE 。如果您将屏幕尺寸减小到992px以下。

基本上，应用flex会导致H2内的.redbox标记出现紫色边框。如果您在开发工具中删除display: flex，则紫色边框会消失。怎么会？

这是一个已知问题，解决方法是什么？

Answer 1

在flex作品上不确定它显示的原因，但如果你发短信，它就是一个链接 - decoration : none; 这将取消下划线。

Answer 2

下划线确实是来自您的块级链接（包裹text-decoration）的a，它应该在那里。

关于花车，而不是弯曲。浮动正在隐藏你的下划线。因为flex会忽略浮点数，所以下划线会重新出现。如果您在大于992像素（容器为float: left，而不是H2）的屏幕上从block删除flex，则会再次看到下划线。< / p>

问题是浮动时下划线消失的原因是什么？它必须与从正常流程中取出的元素相关（很像绝对定位）：https://jsfiddle.net/b5jagc1m/

Answer 3

您正在碰撞用户代理样式表。

因为你已经将h2包装在一个锚元素中，所以整个事情就是一个链接。您可能知道，默认情况下，访问过的链接会变为紫色。

如果您希望下划线为不同颜色，请调整您访问过的链接规则：

a:visited { color: red; }

DEMO

否则，只需删除下划线：

a { text-decoration: none; }

DEMO

但为什么删除display: flex时下划线会消失？

因为flex容器的子项浮动。这意味着当容器打开时，将忽略浮动。根据CSS的规则，flexbox忽略了儿童的浮动：

3. Flex Containers: the flex and inline-flex display values


float和clear对Flex项目没有任何影响，也不会将其从流量中删除。

但是当Flex容器被停用时，inline formatting context会恢复，a元素会崩溃，因为浮动的子项未被清除。（The clearfix div in your code is invalid and doesn't work.）这会使用下划线，但不包含块元素中存在的文本。

参考文献：

使用display flex会导致出现紫色边框

3 个答案: