Форум программистов
 
Контакты: о проблемах с регистрацией, почтой и по другим вопросам пишите сюда - alarforum@yandex.ru, проверяйте папку спам! Обязательно пройдите активизацию e-mail.

Вернуться   Форум программистов > Web > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Здесь нужно купить рекламу за 25 тыс руб в месяц! ) пишите сюда - alarforum@yandex.ru

Ответ
 
Опции темы
Старый 27.08.2019, 13:27   #1
Parallelogram
Недотепа
Форумчанин
 
Регистрация: 18.01.2011
Сообщений: 154
По умолчанию Проблема с версткой в Я.Браузер

Здравствуйте. У меня возникла проблема версткой страницы. В хроме, лисе, 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%;
}
Parallelogram вне форума   Ответить с цитированием
Ответ

Опции темы

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Проблема с версткой!!! Екатерина_21 HTML и CSS 1 19.09.2011 15:17
Проблема с версткой vitaljaa HTML и CSS 7 03.07.2011 11:06
CSS. Проблема с блочной версткой. m0rt HTML и CSS 10 10.03.2011 12:27
Проблема с запросом в браузер Tray-kun Работа с сетью в Delphi 5 18.02.2011 11:14
Есть проблема с версткой на div. Накладывается фон поверх соседнего контейнера. Volfgang HTML и CSS 1 15.12.2008 10:43


07:00.


Powered by vBulletin® Version 3.8.11
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.