Здравствуйте. У меня возникла проблема версткой страницы. В хроме, лисе, IE все нормально, а Я.Браузер - все плохо.
Проблема заключается вот в чем. Синий блок должен занимать все возможную высоту, но если навести курсор на красные квадратики, то блок начинает уменьшаться в высоте, если убрать, то обратно увеличивается. Я методом подбора определил, что если у .btn_in заменить opacity c "0.75" на "1", то всё работает штатно.
С чем это может быть связано? У кого есть Я.Браузер, помогите разобраться!
Ссылка на пример:
https://jsfiddle.net/arbusx/Lv2zc0tx/
Код HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body class="">
<!-- START: .general -->
<div class="general">
<!--START: .right -->
<div class="right">
<div class="top">
<a href="#" class="btn top_child" id="btn_save"><div class="btn_in np np-save"><span class="btn_save">Save</span></div></a>
<div class="btn top_child" id="btn_menu"><div class="btn_in np np-menu-2"><span class="btn_menu">Menu</span></div></div>
<div class="btn top_child" id="btn_newWindow"><div class="btn_in np np-windows"><span class="btn_newWindow">New window</span></div></div>
</div>
<div class="bottom">
<div id="editor" contenteditable="false">
<section id="rich-toolbar"></section>
<section id="rich-editor" class="active"><iframe id="frm"></iframe></section>
<textarea class="textarea" id="textarea" tabindex="2" placeholder=" ツ"></textarea>
</div>
</div>
</div>
<!-- END: .right -->
</div>
<!-- END: .general -->
</body>
</html>
Код:
@charset "UTF-8";
html, body, a, b, blockquote, center, code, div, h1, h2, h3, h4, h5, h6, i, img, p, pre, span, table, td, th, tr, u, video, ul, li, ol, input, submit, button {
border: 0;
margin: 0;
padding: 0;
color: #000;
list-style-type: none;
}
* {
webkit-box-sizing: border-box;
moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
background: #fff;
}
.btn {
-ms-flex-negative: 0;
flex-shrink: 0;
cursor: pointer;
outline: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.btn:hover {
background-color: #afd7d0;
}
.btn:active {
background-color: #76C5B7;
}
ol {
position: relative;
margin-left: 20px;
}
ol:before {
content: "";
position: absolute;
background-color: #bbb;
width: 1px;
height: 100%;
left: -11px;
margin-top: -11px;
}
.general {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
height: 100vh;
}
.right {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
.right .top {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
height: 35px;
min-height: 35px;
-ms-flex-negative: 0;
flex-shrink: 0;
width: 100%;
}
.right .top_child {
display: block;
position: relative;
border: 1px solid #b1b1b1;
z-index: 1;
outline: 0;
text-decoration: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 26px;
width: 26px;
text-align: center;
margin: 5px 2px;
background-color: #f00;
}
.right .top input {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
width: 100%;
min-width: 28px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
margin-top: 5px;
padding: 5px 7px 5px 7px;
text-align: left;
}
.right .top input:active, .right .top input:focus {
border-color: #000;
outline: 0;
}
.right .top .btn_in {
font-size: 1.1rem;
opacity: 0.75;
opacity: 1;
margin: auto;
}
.right .top .btn:hover {
border-color: #000;
}
.right .top .btn:hover > div {
opacity: 1;
}
.right .top .btn:hover img {
opacity: 1;
}
.right .top .btn img {
width: 16px;
height: 16px;
padding: 5px;
opacity: 1;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
.right .top .btn span {
display: none;
}
.right .bottom {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
margin: 0px 2px 2px 2px;
}
.right textarea {
display: block;
width: 100%;
height: 100%;
padding: 7px;
resize: none;
}
.right textarea:focus {
display: block;
position: relative;
border: 1px solid #b1b1b1;
z-index: 1;
outline: 0;
border-color: #000;
}
.editor_disable .right .bottom > div,
.editor_disable .right .bottom textarea {
display: none !important;
}
#editor {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
width: 100%;
height: 100%;
border-radius: 0px;
}
#rich-toolbar {
border: 1px solid #b1b1b1;
border-bottom: 0;
padding: 2px;
width: 100%;
min-height: 35px;
}
#rich-toolbar .bg {
display: none;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 1;
background-color: #000;
opacity: 0.3;
}
#rich-editor {
display: none;
outline: none;
}
#rich-editor iframe {
background-color: #464fb1;
display: block;
width: 100%;
height: 100%;
border: 0;
border: 1px solid #b1b1b1;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#editor #textarea {
display: none;
width: 100%;
}
#rich-editor,
#editor #textarea {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
background-color: rgba(175, 215, 208, 0.3);
}
#rich-editor.active,
#editor #textarea.active {
display: block;
height: 100%;
}
27.08.2019, 12:27
Проблема с версткой в Я.Браузер
Похожие темы
