2012-11-12 2 views
0

Как возможно, что разница в вертикальном положении текстовых полей в форме 3 раза в виде 3-х разностей. браузеры?та же позиция css разные результаты в diff-браузерах

Я сойду с ума. Нехорошо пытаться исправить это в CSS, потому что, если я его изменю, это хорошо в одном, но не в других.

#pricefromR 

{width:75px; 
position:relative; 
right:40px; 
top: 50px; 
} 

#pricetoR 

{width:75px; 
position:relative; 
right:-45px; 
top: 24px; 
} 

Так что это соответствует двум texfields, которые, как предполагается, будет paralell, в то же Leve друг с другом, но они не в разных браузерах, разностью 3 рх и происходит то же самое с другой пары, которые каждый в LI

<li> 
     <input type ="text" id = "areafromR" placeholder="area from" name = "areafrom" maxlength = "5">&nbsp; 
     <input type ="text" id = "areatoR" placeholder="area to" name = "areato" maxlength = "5"> 
    </li> 
+3

Возможно, это связано с полями по умолчанию, полями и границами браузера. Попробуйте установить '{margin: 0; заполнение: 0; border: 0; } 'по связанным элементам, и, надеюсь, вы можете сузить его. – Andy

+1

Покажите нам остальную часть вашего кода: HTML, другие соответствующие CSS – Lowkase

+0

Сбрасываете ли вы свой css? – Marc

ответ

0

Все браузеры различны, они имеют различные значения по умолчанию, а также различные WU = idths/высоты. Лучший способ, которым я знаю, - либо использовать проценты, но это может усложниться. Вы можете сделать отдельный CSS для разных браузеров. Например ...... То есть для исследователя интернета

-2

Вы должны попытаться reset your CSS

В случае, если вы не знаете, каждый браузер имеет свое собственное по умолчанию «пользователя агента» таблица стилей, что он использует, чтобы сделать неустановленные веб-сайты более разборчивыми. Например, большинство браузеров по умолчанию делают ссылки синими и посещают ссылки фиолетовые, дают таблицы определенное количество границ и отступы, применяют переменные размер шрифта к H1, H2, H3 и т. Д. И некоторое количество отступов почти для всего , Вы когда-нибудь задавались вопросом, почему кнопки Submit выглядят по-разному в каждом браузере? Это ограничивает разницу между браузерами

с использованием CSS Reset, вы можете заставить каждый браузер, чтобы иметь все свои стили сбрасываются на нуль, тем меньше кросс-браузерные различия

С помощью этого кода:

/** 
* Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) 
* http://cssreset.com 
*/ 
html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
b, u, i, center, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, 
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, 
time, mark, audio, video { 
margin: 0; 
padding: 0; 
border: 0; 
font-size: 100%; 
font: inherit; 
vertical-align: baseline; 
} 
/* HTML5 display-role reset for older browsers */ 
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { 
display: block; 
} 
body { 
line-height: 1; 
} 
ol, ul { 
list-style: none; 
} 
blockquote, q { 
quotes: none; 
} 
blockquote:before, blockquote:after, 
q:before, q:after { 
content: ''; 
content: none; 
} 
table { 
border-collapse: collapse; 
border-spacing: 0; 
} 

Обычная практика заключается в том, чтобы поместить это в другой файл CSS.

+0

Причина для downvote? – Marc

+4

Это ужасный ответ на простой вопрос. Это похоже на использование дробовика, когда достаточно скальпеля. Это раздувает ваши вычисленные стили с унаследованными свойствами, которые просто не нужно унаследовать. Настройки браузера по умолчанию, хотя они могут немного отличаться, * не отличаются друг от друга *. Существует рекомендуемый по умолчанию W3C, который придерживается большинство браузеров. –

+0

Ну, я не понимаю, почему мы не должны перезагружать наш CSS. Это первое, что я делаю, когда начинаю новый проект. Это простая копия/вставка, которая решает много проблем. Это сделано Эриком Мейером, и это один из самых популярных сбросов CSS. Я не понимаю, почему это было бы плохой практикой. Фактически, это одно из первых, что я узнал, когда начал HTML/CSS – Marc

Смежные вопросы