Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.91/11: Рейтинг темы: голосов - 11, средняя оценка - 4.91
0 / 0 / 0
Регистрация: 09.02.2014
Сообщений: 11

Input в разных браузерах

01.05.2014, 17:39. Показов 2392. Ответов 7
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Вот такой у меня код:

HTML5
1
2
3
4
        <form>
             <input id="search" type="search">
             <input id="button" type="image" src="img/search_btn.png">
       </form>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
#search {
    -webkit-border-radius: 10px 0 0 10px;
    border-radius: 10px 0 0 10px;
    height: 25px;
    float: left;
    border: 1px solid #C3C3C3;
    padding: 0 5px 0 10px;
}
 
#button{
    float: left;
    margin-left: -2px;
}
Проблема: Разные браузера его показывают по разному. Как это исправить?

Пример: сверху вниз - Yandex, Firefox
Изображения
 
0
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
01.05.2014, 17:39
Ответы с готовыми решениями:

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

<input> в мобильных браузерах
привет, граждане программисты! задаю строго прямоугольное поле ввода &quot;&lt;input type='search'&gt;&quot;. в больших браузерах всё отлично,...

Длина input в браузерах разная
В Chrome все как указал, а в Mozila на порядок меньше. Из-за этого получается, что с textarea размер input'a в mozila не совпадает. Как...

7
SF
Boo
142 / 117 / 55
Регистрация: 02.12.2013
Сообщений: 396
01.05.2014, 17:48
Turar, задайте ширину и высоту
0
0 / 0 / 0
Регистрация: 09.02.2014
Сообщений: 11
01.05.2014, 18:17  [ТС]
isco_kg, нет, не катит. все также...
0
 Аватар для sashok89
75 / 75 / 11
Регистрация: 04.08.2012
Сообщений: 526
Записей в блоге: 2
01.05.2014, 18:23
Цитата Сообщение от Turar Посмотреть сообщение
isco_kg, нет, не катит. все также...
а как вы это сделали? покажите код!
0
0 / 0 / 0
Регистрация: 09.02.2014
Сообщений: 11
01.05.2014, 18:50  [ТС]
sashok89,
CSS
1
2
3
4
5
6
7
8
9
#search {
    -webkit-border-radius: 10px 0 0 10px;
    border-radius: 10px 0 0 10px;
    height: 25px; // Длина
    width: 150px;  // Ширина
    float: left;
    border: 1px solid #C3C3C3;
    padding: 0 5px 0 10px;
}
0
SF
Boo
142 / 117 / 55
Регистрация: 02.12.2013
Сообщений: 396
01.05.2014, 19:04
Turar, CSS'ом поработайте

Вариант

JSFIDDLE > http://jsfiddle.net/isco/q6VEr/1/embedded/result/
HTML5
1
2
3
4
5
6
7
8
<div>
    <form action="" method="POST">
        <div class="search">
            <input type="text" placeholder="Поиск" name="" />
            <input type="button" value="" />
        </div>
    </form>
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
    .search {
        background:#fff;
        border:1px solid #eee;
        border-radius:15px 20px 20px 15px;
        height:26px;
        width:250px;
    }
    .search:focus {
        
    }
    input[type="text"] {
        border:none;
        float:left;
        margin:0 0 0 5px;
        height:26px;
        width:200px;
    }
    input[type="button"] {
        background:url([url]http://s020.***********/i722/1405/09/0cb94a780b28.png[/url]) no-repeat;
        border:none;
        float:right;
        height:27px;
        width:41px;
    }
0
0 / 0 / 0
Регистрация: 09.02.2014
Сообщений: 11
01.05.2014, 19:22  [ТС]
isco_kg, проблему нашел. это все из-за "border". firefox border делает за объектом, а Yandex в) Как это исправить не знаете?
0
SF
Boo
142 / 117 / 55
Регистрация: 02.12.2013
Сообщений: 396
01.05.2014, 19:56
Turar, у меня ваш код работает нормально Yandex FF Opera
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
01.05.2014, 19:56
Помогаю со студенческими работами здесь

Феномен с высотой Input(submit) в браузерах
Очень интересный феномен с &lt;input type=&quot;submit&quot;&gt; Вот исходный код (за Doctype был взят &lt;!DOCTYPE html&gt;, остальные варианты были...

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

float в разных браузерах
.simple_box { padding: 4px; color: #929292; font-size: 10px; font-family: Verdana, Helvetica, Arial, sans-serif; ...

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

Меню в разных браузерах
Создаю меню с помощью списков. Начал делать в браузере Chrome, доделал и решил проверить в других браузерах. Везде кроме Мозилы все...


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

Или воспользуйтесь поиском по форуму:
8
Ответ Создать тему
Новые блоги и статьи
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android
8Observer8 26.01.2026
Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .
Установка Android SDK, NDK, JDK, CMake и т.д.
8Observer8 25.01.2026
Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .
Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf
8Observer8 25.01.2026
Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .
Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly
8Observer8 24.01.2026
Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
моя боль
iceja 24.01.2026
Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .
Модель сукцессии микоризы
anaschu 24.01.2026
Решили писать научную статью с неким РОманом
http://iceja.net/ математические сервисы
iceja 20.01.2026
Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .
http://iceja.net/ сервер решения полиномов
iceja 18.01.2026
Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru