БЛОГ НА HUSL


Почему у меня в ie 11 коряво работает позиционирование

Автор вопроса: MrIngo

Почему у меня в ie странно ведет себя позиционирование и как это исправить?в ie

в Chrome

вот часть кода, которая отвечает за эту форму:

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.visuallyHidden:not(:focus):not(:active),
input[type='checkbox'].visuallyHidden,
input[type='radio'].visuallyHidden {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  white-space: nowrap;
  border: 0;
  clip-path: inset(100%);
}

.modalHotelSearch {
  font-weight: 700;
  width: 568px;
  height: 395px;
  margin: 0 auto;
  padding: 55px;
  background-color: #fff;
  box-shadow: 0 7px 15px 0 rgba(0, 1, 1, .15);
}

.modalHotelSearch input {
  font-weight: inherit;
  border: none;
  background-color: #f2f2f2;
}

.modalHotelSearch input:hover {
  background-color: #ebebeb;
}

.formWrap {
  display: flex;
  flex-direction: column;
  height: 172px;
  justify-content: space-between;
}

.formWrap p {
  margin: 0;
}

.date input {
  width: 346px;
  height: 38px;
  padding: 13px;
  padding-right: 40px;
}

.date label {
  margin-left: 0;
}

.date {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.buttonCalender {
  position: absolute;
  top: 2px;
  right: 0;
  width: 38px;
  height: 38px;
  padding: 0;
  cursor: pointer;
  border: none;
  background-color: transparent;
}

.buttonCalender:hover svg {
  fill: #000;
}

.buttonCalender:active svg {
  fill: #81b3d2;
}

.amount input {
  width: 114px;
  height: 38px;
  padding: 0 38px;
  text-align: center;
}

.searchHotel input:focus {
  border: 2px solid #e5e5e5;
  outline: none;
}

.amount {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.amountAdults {
  width: 226px;
}

.amountChildren {
  width: 179px;
}

.amounts {
  display: flex;
  width: 458px;
  justify-content: space-between;
  align-items: center;
}

.date input::-webkit-calendar-picker-indicator {
  display: none;
}

.amount input::-webkit-inner-spin-button,
.amount input::-webkit-outer-spin-button {
  display: none;
}

.innerSpinButton,
.outerSpinButton {
  position: absolute;
  width: 38px;
  height: 38px;
  padding: 0;
  cursor: pointer;
  border: none;
  background-color: red;
}

.outerSpinButton {
  right: 76px;
}

.innerSpinButton {
  right: 0;
}

.outerSpinButton::before {
  position: absolute;
  top: 18px;
  left: 13px;
  width: 12px;
  height: 3px;
  content: '';
  background-image: url('../img/minusGrey.png');
  background-repeat: no-repeat;
  background-position: 0 0;
}

.outerSpinButton:hover::before {
  background-image: url('../img/minusBlack.png');
}

.outerSpinButton:active::before {
  background-image: url('../img/minusBlue.png');
}

.innerSpinButton::before {
  position: absolute;
  top: 14px;
  right: 13px;
  width: 11px;
  height: 11px;
  content: '';
  background-image: url('../img/plusGrey.png');
  background-repeat: no-repeat;
  background-position: 0 0;
}

.innerSpinButton:hover::before {
  background-image: url('../img/plusBlack.png');
}

.innerSpinButton:active::before {
  background-image: url('../img/plusBlue.png');
}

.innerSpinButton:hover,
.innerSpinButton:active,
.innerSpinButton:focus,
.outerSpinButton:hover,
.outerSpinButton:active,
.outerSpinButton:focus {
  background-color: #ebebeb;
}

.buttonToSearch {
  display: block;
  width: 458px;
  height: 58px;
  margin: 55px 0 0 0;
  text-align: center;
  vertical-align: center;
  background-color: #81b3d2;
}

.buttonToSearch:hover {
  background-color: #669ec0;
}

.buttonToSearch:active {
  color: #94b9d2;
  background-color: #5496bd;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="wrapModalHotelSearch">
    <section class="modalHotelSearch">
      <h2 class="visuallyHidden">Поиск гостиницы в Седоне</h2>
      <form class="searchHotel" action="#" method="post">
        <div class="formWrap">
          <p class="date">
            <label for="dateOfArrival">Дата заезда:</label>
            <input id="dateOfArrival" type="date" name="date-of-race" value="2017-04-24">
            <button type="button" class="buttonCalender">
                            <svg xmlns="http://www.w3.org/2000/svg" width="21" height="22" viewBox="0 0 21 22" xml:space="preserve" fill="#a9a9a9">
                                <path d="M19.251 2.025h-2.845V.648c0-.381-.294-.689-.656-.689-.363 0-.656.308-.656.689v1.377h-3.938V.648c0-.381-.294-.689-.655-.689-.363 0-.657.308-.657.689v1.377H5.906V.648c0-.381-.294-.689-.656-.689-.363 0-.657.308-.657.689v1.377H1.75C.784 2.025 0 2.847 0 3.862v16.302C0 21.179.784 22 1.75 22h17.501c.966 0 1.749-.821 1.749-1.836V3.862c0-1.015-.783-1.837-1.749-1.837zm.437 18.139a.448.448 0 0 1-.437.459H1.75a.45.45 0 0 1-.438-.459V3.862a.45.45 0 0 1 .438-.459h2.844v1.378c0 .381.294.689.657.689.362 0 .656-.308.656-.689V3.403h3.938v1.378c0 .381.294.689.657.689.361 0 .655-.308.655-.689V3.403h3.938v1.378c0 .381.293.689.656.689.362 0 .656-.308.656-.689V3.403h2.845c.241 0 .437.206.437.459v16.302z"/>
                                <path d="M4.594 8.225h2.625v2.066H4.594zM4.594 11.668h2.625v2.067H4.594zM4.594 15.112h2.625v2.066H4.594zM9.188 15.112h2.625v2.066H9.188zM9.188 11.668h2.625v2.067H9.188zM9.188 8.225h2.625v2.066H9.188zM13.781 15.112h2.625v2.066h-2.625zM13.781 11.668h2.625v2.067h-2.625zM13.781 8.225h2.625v2.066h-2.625z"/>
                            </svg>
                        </button>
          </p>
          <p class="date">
            <label for="dateOfCheckout">Дата выезда:</label>
            <input id="dateOfCheckout" type="date" name="date-of-departure" value="2017-07-04">
            <button type="button" class="buttonCalender">
                            <svg xmlns="http://www.w3.org/2000/svg" width="21" height="22" viewBox="0 0 21 22" xml:space="preserve" fill="#a9a9a9">
                                <path d="M19.251 2.025h-2.845V.648c0-.381-.294-.689-.656-.689-.363 0-.656.308-.656.689v1.377h-3.938V.648c0-.381-.294-.689-.655-.689-.363 0-.657.308-.657.689v1.377H5.906V.648c0-.381-.294-.689-.656-.689-.363 0-.657.308-.657.689v1.377H1.75C.784 2.025 0 2.847 0 3.862v16.302C0 21.179.784 22 1.75 22h17.501c.966 0 1.749-.821 1.749-1.836V3.862c0-1.015-.783-1.837-1.749-1.837zm.437 18.139a.448.448 0 0 1-.437.459H1.75a.45.45 0 0 1-.438-.459V3.862a.45.45 0 0 1 .438-.459h2.844v1.378c0 .381.294.689.657.689.362 0 .656-.308.656-.689V3.403h3.938v1.378c0 .381.294.689.657.689.361 0 .655-.308.655-.689V3.403h3.938v1.378c0 .381.293.689.656.689.362 0 .656-.308.656-.689V3.403h2.845c.241 0 .437.206.437.459v16.302z"/>
                                <path d="M4.594 8.225h2.625v2.066H4.594zM4.594 11.668h2.625v2.067H4.594zM4.594 15.112h2.625v2.066H4.594zM9.188 15.112h2.625v2.066H9.188zM9.188 11.668h2.625v2.067H9.188zM9.188 8.225h2.625v2.066H9.188zM13.781 15.112h2.625v2.066h-2.625zM13.781 11.668h2.625v2.067h-2.625zM13.781 8.225h2.625v2.066h-2.625z"/>
                            </svg>
                        </button>
          </p>
          <div class="amounts">
            <div class="amount amountAdults">
              <label for="amountOfAdults">Взрослые:</label>
              <button type="button" class="outerSpinButton"><span class="visuallyHidden">+ 1 взрослый</span></button>
              <input id="amountOfAdults" type="number" name="adults" value="2">
              <button type="button" class="innerSpinButton"><span class="visuallyHidden">- 1 взрослый</span></button>
            </div>
            <div class="amount amountChildren">
              <label class="amountOfChildren" for="amountOfChildren">Дети:</label>
              <button type="button" class="outerSpinButton"><span class="visuallyHidden">+ 1 ребенок</span></button>
              <input id="amountOfChildren" type="number" name="children" value="0">
              <button type="button" class="innerSpinButton"><span class="visuallyHidden">- 1 ребенок</span></button>
            </div>
          </div>
        </div>
        <button class="button buttonToSearch" type="submit">Найти</button>
      </form>
    </section>
  </div>
</body>

</html>


Источник

Ответы (1 шт):

Автор решения: Pîrnău Artemie

Псевдокласс :not не поддерживается в IE11, вот почему у вас проблемы с позиционированием

→ Ссылка

licensed under cc by-sa 3.0 with attribution.