昨日は練習していましたが、数時間後にChromeでこれを確認しました(firefoxで作業していました)。私はそれをどのように修正すべきですか?
私はどこからばかげた高さを取るのか分かりません。 Sctructureもう一度Chromeのバグの高さのプロパティ
html, body {
margin: 0;
padding: 0;
}
body {
background-color: #f0ca4d;
display: flex;
justify-content: center;
font-family: "Roboto";
color: white;
}
.popup {
margin-top: 100px;
width: 400px;
/* height: 300px;*/
background-color: #fff;
-webkit-box-shadow: 0px 0px 10px 1px rgba(51,51,51,0.2);
-moz-box-shadow: 0px 0px 10px 1px rgba(51,51,51,0.2);
box-shadow: 0px 0px 10px 1px rgba(51,51,51,0.2);
position: relative;
}
.top {
width: 100%;
height: 70px;
background-color: #324d5c;
display: flex;
justify-content: flex-start;;
flex-direction: row;
}
.top span {
margin: 32px 16px 16px 16px;
font-size: 24px;
font-weight: 300;
}
.content {
color: rgba(0,0,0,0.5);
margin: 32px 32px 0px 32px;
line-height: 150%;
}
.fab {
width: 48px;
height: 48px;
background-color: #de5b49;
border-radius: 50%;
margin-left: auto;
margin-right: 16px;
position: absolute;
right: 0px;
top: 46px;
text-align: center;
}
.fab:hover span {
cursor: pointer;
}
.fab span {
font-size: 30px;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
font-weight: 300;
line-height: 48px;
display: inline-block;
}
.bot span {
text-transform: uppercase;
color: #324d5c;
font-weight: 500;
padding: 16px 32px 16px 32px;
transition: background-color 0.45s cubic-bezier(0,1,.83,.67) 0.08s;
background-color: white;
}
.bot span:hover {
background-color: #f8f8f8;
cursor: pointer;
}
.bot {
width: 100%;
display: flex;
justify-content: flex-end;
}
#disabled {
color: #d1d1d1;
margin-right: auto;
}
#disabled:hover {
background-color: white !important;
cursor: default;
-webkit-user-select: none; /* Chrome all/Safari all */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* IE 10+ */
user-select: none; /* Likely future */
}
:
<div class="popup">
<div class="top">
<span>Warning box</span>
</div>
<div class="fab">
<span>+</span>
</div>
<div class="content">
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<!-- <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> -->
</div>
<div class="bot">
<span id="disabled">disabled</span>
<span>ENABLED</span>
</div>
</div>
はこの作業を取得することはできません
スタイリングを得るプレビューです。
ですそれは正方形の箱です。 –
それは奇妙です、それはまた私のためにクロムにブラケットを通過している – Dawid
うん、私は友人にそれを送った、彼は私と同じ問題があります。 – Dawid