Ширина CSS в процентах не отображается должным образом в IE7 - PullRequest
Новая
       26

Ширина CSS в процентах не отображается должным образом в IE7

1 голос
/ 29 марта 2011

Я пытаюсь выровнять свои флажки на следующей странице в 3 столбца. Существует несколько разных версий этой страницы, и у каждой может быть больше или меньше флажков. Коробки идеально совмещаются в Firefox и других браузерах, но не в IE7. Я использую CSS включен ниже. Может кто-нибудь помочь мне разобраться с исправлением для IE7? Я использую лучшие фильтры для Drupal для создания текстовых полей.

http://www.zambux.com/coupons/services

.bef-select-as-checkboxes .form-item {  
  width: 50%;  
  float: left;  
}

1 Ответ

0 голосов
/ 29 марта 2011

Я использую FF4, и ваша страница выглядит неправильно.

  • Прежде всего, у вас есть ".form-checkbox" как 100px, измените это на что-то более широкое или более гибкое (иначе всегда ваши элементы будут плохо переноситься)
  • Вы не можете выровнятьвещи в 3 столбцах с использованием ширины: 50%, потому что вы определяете ПОЛОВИНУ места, которое будет занято .form.item, вы хотели бы использовать 33%, но я предлагаю сделать 30% и добавить 2% поля справа отоставьте небольшой промежуток между элементами

Я бы сделал что-то подобное в виде структуры 

<div class="container clearfix">
   <label for="input1">
     <input type="text" id="input1" />
     <span>my text</span>
   </label>
   <label for="input2">
     <input type="text" id="input2" />
     <span>my text</span>
   </label>
   <label for="input3">
     <input type="text" id="input3" />
     <span>my text</span>
   </label>
</div>

и добавил бы как CSS 

#container label{width:30%; margin-right:2%; float:left;}
.clearfix:after { /*This is for clearing your floating elements*/
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}
...