IE7 - пытается поместить два смежных divs в тег кнопки

Я пытаюсь создать 2 divs в теге кнопки (1 div будет содержать значок & другой описательный текст, обратите внимание, что я не могу изменить теги html).
В IE7 2 divs в div сидят бок о бок, тогда как те же 2 divs в теге кнопки сидят 1 ниже другого.
Есть ли что-то конкретное с тегом кнопки, чтобы расположить погружение 1 ниже друг друга и может ли оно быть переопределено любыми хаками IE7 или трюками CSS?IE7 - пытается поместить два смежных divs в тег кнопки

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
     button { 
      display:block; 
      float:left; 
      clear:none; 
     } 
     .div1 { 
      border:1px solid red;float:left; 
     } 
     .div2 { 
      border:1px solid red;float:left; 
     } 
     .div3 { 
      border:1px solid cyan;float:left; 
     } 
    </style> 
</head> 
<body> 
<button><div class="div1">div1</div><div class="div2">div2</div></button> 
<div class="div3"><div class="div1">div1</div><div class="div2">div2</div></div> 
</body> 
</html>

источник

2013-07-01 code.tweetie

Вы пробовали ясно: both ;? –

Пробовал, не работал. –

Я вижу, в чем проблема, но единственное, что я могу придумать, это дать кнопке явную ширину, достаточно большую, чтобы позволить divs сидеть бок о бок. Это вариант? О, и вам не нужно «display: block», потому что он уже плавает. –

попробовать это шириной IE7 является обязательным

  button { 

     float:left; 
     clear:none; 
     width:80px; 
    } 
     .div1 { 
      border:1px solid red;float:left; 
     } 
     .div2 { 
      border:1px solid red;float:left; 
     } 
     .div3 { 
      border:1px solid cyan;float:left; 
     }

источник

2013-07-01 13:02:30 falguni

Исправление ширины работает, спасибо, но фиксация ширины кнопки может быть не идеальной, поскольку длина описательного текста может различаться для разных языков или есть другой способ решить эту проблему тоже? –

Если вы не хотите, чтобы дать кнопку ширину, это так близко, как я мог бы прийти.

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
    button { 
    /* no styles */ 
    } 
    .div1 { 
    display:inline; 
    border:1px solid red; 
    } 
    .div2 { 
    display:inline; 
    border:1px solid red; 
    } 
    .div3 { 
    display:inline; 
    border:1px solid cyan; 
    } 
    </style> 
</head> 
<body> 
    <button><div class="div1">div1</div><div class="div2">div2</div></button> 
    <div class="div3"><div class="div1">div1</div><div class="div2">div2</div></div> 
</body> 
</html>

Теперь это далеко не идеально, я вижу это, но, возможно, это даст вам кое-что для начала.

источник

2013-07-01 13:25:24

Спасибо, мистер Листер. Моя ошибка, о которой я не упоминал в своем первоначальном сообщении, что те div не могут быть встроенными, потому что 1-й div для значка (я использую фоновое изображение), для чего потребуется ширина и высота установленный на нем, поэтому я не мог идти по этому маршруту. –

IE7 - пытается поместить два смежных divs в тег кнопки

ответ

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