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

@Turar · Регистрация: 09.02.2014

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

Вот такой у меня код:

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

@SF · 01.05.2014, 17:48

Turar, задайте ширину и высоту

@Turar · 01.05.2014, 18:17 **[ТС]**

isco_kg, нет, не катит. все также...

@sashok89 · 01.05.2014, 18:23

Сообщение от Turar

isco_kg, нет, не катит. все также...

а как вы это сделали? покажите код!

@Turar · 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;
}

@SF · 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;
    }

@Turar · 01.05.2014, 19:22 **[ТС]**

isco_kg, проблему нашел. это все из-за "border". firefox border делает за объектом, а Yandex в) Как это исправить не знаете?

@SF · 01.05.2014, 19:56

Turar, у меня ваш код работает нормально Yandex FF Opera

Новые блоги и статьи Все статьи Все блоги /
Воспроизведение звукового файла с помощью 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 полиномов. . .

@SF Boo 142 / 117 / 55 Регистрация: 02.12.2013 Сообщений: 396
	01.05.2014, 17:48
	Turar, задайте ширину и высоту 0

@Turar 0 / 0 / 0 Регистрация: 09.02.2014 Сообщений: 11
	01.05.2014, 18:17 [ТС]
	isco_kg, нет, не катит. все также... 0

@Turar 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