Question

我试图创建一个响应式设计，可能有一个看起来像它的按钮＆＃34;浮动＆＃34;在div元素下。

在Opera和Chrome中，我得到了我想要的东西：

这是在Firefox中发生的事情：

您可以在此处查看我的完整代码： https://jsfiddle.net/fej93gg5/

我该如何解决这个问题？

修改：我发现了Firefox here的错误报告。看来，这个bug存在很长时间，所以我不能很快依赖它。现在我正在寻找一种解决方法。

<div class="blockcontainer-2col with-outline vertical-center ">
    <div class="blockcontainer-content">

    <h2 class="titlecontent-2col">Some title</h2>

    <div class="textcontent">
        <ul class="bulletlist">
            <li>Blah blah</li>
            <li>Blub blub</li>
            <li>Whoopdi doopdi hokus pokus kdkjeljer</li>i>
        </ul>
        <!-- This button is not supposed to resize the outline -->
        <div style="display: float; font-size: 1.7em; text-align: center; font-weight: bold;">
             <a class="flatblockbutton" href="http://bluedomainer.com/portfolio/">Check out portfolio</a>
        </div>
    </div>
    </div>
</div>

这是完整的CSS：

/* reset all margins and borders to zero */
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video {
margin:0;
padding:0;
border:0;
font:inherit;
vertical-align:baseline
}

/*trick to vertically align anything */
.vertical-center
{
display: flex;
align-items: center;
justify-content: center;
}

/* make white transparent outline */
.with-outline {
outline: thick solid;
outline-color: rgba(255, 255, 255, .5);
outline-width: 1rem;
background-color: white;
}

body {
-webkit-font-smoothing:antialiased;
-webkit-text-size-adjust:100%;
}

.wholecontainer-2col {
background-color: violet;
padding: 1rem;
}

/*parent*/
.colcontainer-2col {
display: flex; 
display: -webkit-flex;
display: -ms-flexbox;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: stretch;
align-content: center;
text-align: center; 
}

/* every flex child */
.blockcontainer-2col {
margin: 2rem;
padding:0;
}

/* make items resizable */
.resizable {
display: table-cell;
width: auto;
max-height: 27rem; /*THIS*/
}

/* Title format */
.titlecontent-2col {
padding-top: 20px;
text-align: center;
padding: 1em;
line-height:2rem;
font-size:2rem;
font-family: "Open Sans", sans-serif;
font-weight:bold;
color:#4d4c4c;
}

/* Text format */ 
.textcontent {
text-align: justify;
font-family:"Droid Sans",sans-serif;
color:#696969;
}


/* Bullet list format */
.bulletlist {
    counter-reset: foo;
    display: table;
    font-size: 1.7rem;
    text-align: left;
    margin:0 auto;
    list-style-position:inside;
    padding-left: 0.5rem; 
    padding-right: 0.5rem;
}

.bulletlist>li {
    list-style: none;
    counter-increment: foo;
    display: table-row;
    text-align: justify;
}

.bulletlist>li::before {
    content: "•";
    display: table-cell;
    text-align: right;
    padding-right: .3em;
}

.flatblockbutton {
    box-sizing: border-box;
    text-decoration:none;
    box-shadow: 0px 2px 7px 5px rgba(0,0,0,0.12);
    padding: 1rem 4rem;
    font-family: Proxima,Helvetica,sans-serif;
    line-height: 1rem;
    background-color: rgba(0, 129, 186, 1);
    color: #fff;
    border: none;
    cursor: pointer;
    display: inline-block;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 3px;
    -webkit-font-smoothing: antialiased;
    -webkit-transition: 500ms linear 0s;
    -moz-transition: 500ms linear 0s;
    -o-transition: 500ms linear 0s;
    transition: 500ms linear 0s;
    position: relative;
    top: 2rem;
    left: 0rem;
    overflow:hidden;
}

.flatblockbutton:hover, .flatblockbutton:focus {
    background: rgba(16, 145, 202, 1);
    text-shadow: -1px 1px 10px #ffc, 1px -1px 8px #ffffff;
    box-shadow: 5px 7px 12px 10px rgba(0,0,0,0.14);
    top: 1.5rem;
    left: -0.5rem
}

Answer 1

这与长期存在Firefox Bug #687311

有关

我意识到我不必坚持使用outline。我摆脱了outline并使用border进行替换。如果您不必使用outline，则此解决方案是一种非常方便的解决方法。

换句话说，而不是：

/* make white transparent outline - buggy in Firefox*/
.with-outline {
outline: thick solid;
outline-color: rgba(255, 255, 255, .5);
outline-width: 1rem;
background-color: white;
}

我用过

/* make white transparent border - works in Firefox*/
.with-outline {
border: 1rem solid rgba(255, 255 ,255,.5);
background-color: rgba(255, 255, 255, 1);

-moz-background-clip: padding;     /* Firefox 3.6 */
-webkit-background-clip: padding;  /* Safari 4? Chrome 6? */
background-clip: padding-box;      /* Firefox 4, Safari 5, Opera 10, IE 9 */
}

您还可以将您的班级从with-outline重命名为with-border。 background-clip是必需的，否则背景颜色将与边框重叠。

https://jsfiddle.net/pjc0xmh8/

按钮调整Firefox 50.0中父级的div容器大纲

1 个答案: