Как удалить 1px дополнительную границу на DIV в IE7?

У меня есть divs, каждый из которых содержит одно текстовое поле. У меня есть текстовое поле с высотой: 25px и div с margin-top: 5px; Во всех браузерах, отличных от IE7, страница отображает с div с такой же высотой, как текстовое поле и правильный запас. Но в IE7 это дает дополнительное пространство по вертикали для div, поэтому моя страница выглядит растянутой.Как удалить 1px дополнительную границу на DIV в IE7?

Я пробовал различные решения, такие как дисплей: нет, ясно: оба, заполнение: 0, margin: 0. Я сравнил модель коробки во всех браузерах, также в IE7 только она показывает дополнительную высоту на элементе div.

Есть ли какой-либо трюк CSS для решения этой проблемы IE7? Спасибо.

Sample code :- 
HTML : 
<div> 
<input class="myInput" type="text" /> 
</div> 
<div> 
<input class="myInput" type="text" /> 
</div> 

CSS: 

.myInput{ 
    border: 1px solid #336699; color: #666666; font-size: 10px; font-weight: normal; height: 13px; font: arial; padding: 5px; 
} 

.ie7 div{ padding:0 margin:0;}

это сделает мое текстовое поле высотой 25 пикселей. Вложенные div не имеют никаких стилей. Я попытался CSS хаков в IE7 с

источник

2013-12-24 Hemant Barhate

Отредактированный мой вопрос. –

текстовое поле - это 13 px accrdng css, и вы говорите его 25! –

textfield height 13px + padding-top 5px + padding-bottom 5px + верхняя граница 1px + нижняя граница 1px = 25px; –

Я думаю, это потому, что в современных браузерах некоторые <input> типов имеет свойство box-sizing:border-box или вы установили, что имущество где-то; что делает height не увеличиваясь с значением границы, но в IE7 это свойство не поддерживается.

Вы можете сделать конкретное значение хак Fo IE7 и ниже на вашей высоте дисконтирование размер границы:

.yourinput { 
    box-sizing:border-box; 
    border: 1px solid gray; 
    height:25px; 
    *height:23px; /*real height - border size*/ 
}

источник

2013-12-24 13:51:32 DaniP

Если я уменьшу высоту, тогда форма выглядит уродливой. –

Уменьшить реальную высоту - это то, что размер коробки: border-box ... с этим вы просто делаете работу border-bx для IE7 @HemantBarhate – DaniP

Спасибо @ Danko, я знаю, что модель коробки в IE и других браузерах отличается и ваше предложение помогло мне, но я использовал условные таблицы стилей, а не хаки. :) –

Try использовать IE7 взломать, как показано ниже,

*+html .YourClassName { /*CSS rule*/ }

источник

2013-12-24 13:46:08

IE7 и друга будут устанавливать свои собственные границы на входе дивы. Поэтому установите границу 0px, если вы не хотите границы.

Вы можете сделать так, как:

input { 
    border: 0px solid silver; 
}

или даже более конкретно

input[type="text"] { 
    border: 0px solid silver; 
}

источник

2013-12-24 13:47:20 CRABOLO

Входы не имеют проблем. я пробовал только входы на моей странице, он корректно отображает IE7 без дополнительного интервала –

Это может быть еще один вариант для вас. Вы можете использовать условный css, где вы можете писать стили seprate для IE7. Вы можете посетить следующую ссылку, в которой вы сможете увидеть использование условного css.

http://www.conditional-css.com/usage.

источник

2013-12-24 14:05:04

Уже использовал. –

Как удалить 1px дополнительную границу на DIV в IE7?

ответ

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