Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 5.00/4: Рейтинг темы: голосов - 4, средняя оценка - 5.00
Enzzio
71 / 29 / 4
Регистрация: 29.05.2010
Сообщений: 458
Завершенные тесты: 1
#1

Сделать textarea одинаковых размеров в разных браузерах

14.01.2016, 19:35. Просмотров 651. Ответов 4
Метки нет (Все метки)

Доброго времени суток. Потребовалось использовать textarea, а он разного размера в браузерах. В Firefox 132*87, в Chrome 122*75. Как сделать одинаковые размеры?

Кликните здесь для просмотра всего текста
HTML5
1
2
3
4
5
6
7
8
9
10
11
<html>
<head>
    <title>
        Textarea
    </title>
    <meta charset="UTF-8">
</head>
<body>
    <textarea cols="15" rows="5" style="box-sizing: content-box; margin: 0; padding: 2px 0 0 2px; font-family: monospace;">Какой-то текст</textarea>
</body>
</html>


Добавлено через 24 минуты
Я так понял, что одними cols и rows одинаковые ширину и высоту не получить. В результате метода Тыка пришел к такому перегруженному стилю.

Кликните здесь для просмотра всего текста
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html>
<head>
    <title>
        Textarea
    </title>
    <meta charset="UTF-8">
</head>
<body>
    <textarea  style="box-sizing: content-box; display: inline-block; font-family: monospace; font: 12pt Arial; font-size: 100%; line-height: 1.1; margin: 0; padding: 2px 0 0 2px; text-align: start; text-indent: 0; word-wrap: normal; letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-rendering: auto;
    color: initial;
    flex-direction: column;
    resize: none;
    letter-spacing: 0;
    width: 150px;
    height: 100px;
    overflow-x: hidden;
    overflow-y: auto;"> </textarea>
</body>
</html>

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
14.01.2016, 19:35
Ответы с готовыми решениями:

Элементы находятся в разных местах в разных браузерах
В Хроме всё отображается как нужно, в Мозилле - надпись &quot;Вертянка&quot; уходит...

Создать над одним элементом другой одинаковых размеров
Не силен (пока) в вёрстке, поэтому прошу знающих людей помочь. Допустим есть...

Слайдер с изображениями разных размеров
Как правильно верстать слайдер с изображениями разных размеров? Допустим чтобы...

Меню в виде плиток разных размеров
нужно сделать меню такого вида знаю что это типа сетки twitter bootstrap, но я...

Картинки разных размеров занимают свободные места
Есть какойто набор картинок с разными размерами. Нужно чтобы они на сайте...

4
fol
481 / 464 / 149
Регистрация: 08.07.2013
Сообщений: 1,664
Записей в блоге: 1
14.01.2016, 21:47 #2
Явно задаем для input[type="text"], input[type="password"] и textarea размер шрифта (font-size), внутренние отступы (padding). Для textarea так же указываем имя шрифта (font-family).
Заметка: для более предсказуемого поведения полей так же можно задать оформление границ (border), но это подпортит вид полей в некоторых браузерах (например, Opera поле станет прямоугольным, без скруглений углов) — используем при необходимости.

взято отсюда
0
Enzzio
71 / 29 / 4
Регистрация: 29.05.2010
Сообщений: 458
Завершенные тесты: 1
15.01.2016, 00:56  [ТС] #3
fol,
Не ознакомились с сообщением, в нем отчетливо видно применение приведенной "копипасты".

Тема неактуальна, можно закрыть.
0
fol
481 / 464 / 149
Регистрация: 08.07.2013
Сообщений: 1,664
Записей в блоге: 1
15.01.2016, 09:29 #4
Цитата Сообщение от Enzzio Посмотреть сообщение
CSS
1
2
3
4
5
6
7
8
9
10
11
12
box-sizing: content-box; display: inline-block; font-family: monospace; font: 12pt Arial; font-size: 100%; line-height: 1.1; margin: 0; padding: 2px 0 0 2px; text-align: start; text-indent: 0; word-wrap: normal; letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-rendering: auto;
color: initial;
flex-direction: column;
resize: none;
letter-spacing: 0;
width: 150px;
height: 100px;
overflow-x: hidden;
overflow-y: auto;
что это за наркомания? я сам проверил в фф и хроме: пример работает, более того, достаточно width и height указать
0
Enzzio
71 / 29 / 4
Регистрация: 29.05.2010
Сообщений: 458
Завершенные тесты: 1
15.01.2016, 19:35  [ТС] #5
fol, наркомания потому, что я искал способ без указания width и height, только за счет cols и rows, для чего по идее нужно было прийти к единому отображению интервалов шрифта. В данном случае, эксперимент с одним тегом, соответственно в html он был единственным, не считая необходимый минимум.
0
15.01.2016, 19:35
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
15.01.2016, 19:35

Слои в разных браузерах
Добрый день/вечер/ночь =) Возникла &quot;Проблемка&quot; с отображением слоев в...

Смещения в разных браузерах
Кто мне может назвать причину смещений?????:wall::wall::wall: в разных...

Шрифты в разных браузерах
День добрый! Подскажите пожалуйста, как можно установить одинаковый размер...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru