Разная толщина у линий тега hr

150

25 октября 2019, 07:10

Почему у линий <hr> разные толщины?

h2 {} 
 
label { 
  float: left; 
  padding-right: 10px; 
} 
 
hr { 
  border: none; 
  background: gray; 
  height: 1px; 
} 
 
.field { 
  clear: both; 
  text-align: right; 
  line-height: 25px; 
} 
 
.main { 
  float: left; 
}

<h2>Registration</h2> 
<form> 
  <div class="main"> 
    <div class="field"> 
      <label>Name:</label> 
      <input type="text"> 
    </div> 
    <hr> 
    <div class="field"> 
      <label>Surname:</label> 
      <input type="text"> 
    </div> 
    <hr> 
    <div class="field"> 
      <label>Login:</label> 
      <input type="text"> 
    </div> 
    <hr> 
    <div class="field"> 
      <label>Password:</label> 
      <input type="password"> 
    </div> 
    <hr> 
    <div>Man<input name="gender" type="radio" value="Man"> Woman<input name="gender" type="radio" value="Woman"></div> 
    <hr> 
    <input type="submit" value="Выбрать"> 
  </div> 
</form>

Answer 1

Очевидно, вы играетесь с масштабом, поэтому и ловите изменение толщины линий. Тема достаточно обширна, в плане отрисовки браузерами различных свойств, плотности и количества пикселей. Если вам интересно решение именно этого вопроса, то замените фон на линию границы:

border-top: 1px gray solid;

h2 {} 
 
label { 
  float: left; 
  padding-right: 10px; 
} 
 
hr { 
  border: none; 
  border-top: 1px gray solid; 
} 
 
.field { 
  clear: both; 
  text-align: right; 
  line-height: 25px; 
} 
 
.main { 
  float: left; 
}

<h2>Registration</h2> 
<form> 
  <div class="main"> 
    <div class="field"> 
      <label>Name:</label> 
      <input type="text"> 
    </div> 
    <hr> 
    <div class="field"> 
      <label>Surname:</label> 
      <input type="text"> 
    </div> 
    <hr> 
    <div class="field"> 
      <label>Login:</label> 
      <input type="text"> 
    </div> 
    <hr> 
    <div class="field"> 
      <label>Password:</label> 
      <input type="password"> 
    </div> 
    <hr> 
    <div>Man<input name="gender" type="radio" value="Man"> Woman<input name="gender" type="radio" value="Woman"></div> 
    <hr> 
    <input type="submit" value="Выбрать"> 
  </div> 
</form>

Answer 2

Разная толщина это графический баг полупикселей. У меня он проявился если увеличить масштаб страницы до 125%.

Я бы сделал так:

hr {
    border: none;
    border-bottom: 1px solid gray;
}

Answer 3

hr {
  border: none;
  height: 1px;
  /* Set the hr color */
  color: #f0f;
  /* old IE */
  background-color: #f0f;
  /* Modern Browsers */
}

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Вывод данных в angular

При выводе данных в html

185

HTML

Как сделать текст как на диодном табло? [закрыт]

Как сделать анимированный текст, чтоб выглядел как на диодном табло на черном фоне?

161

jQuery

jQuery mmenu проблема

Буду очень благодарен если кто-нибудь поможет с этимСделал всё точно так, как было показано на сайте

189

jQuery

Кто-то пробовал использовать lightbox2 с babel?

Столкнулся с такой проблемой, что при подключении компилятор babeljs к своему таскраннеру, консоль выбивает ошибку:

155