1
div要素の下に「浮動」するようなボタンが表示される可能性のあるレスポンシブなデザインを作成しようとしています。オペラとChromeでは ボタンはFirefoxの親のdivコンテナのアウトラインをサイズ変更します012.0
私が欲しいものを得る：
これはFirefoxで何が起こるかです： 
はあなたがここに私の完全なコードを表示することができます。 https://jsfiddle.net/fej93gg5/
どのように私ができますこれを修正しますか？
を編集してください：Firefox hereのバグレポートが見つかりました。それは、このバグが非常に長い間存在しているので、私はすぐにそれに依存することはできません。今私は回避策を探しています。
<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
}