Question

我正在尝试在按钮标记中设置2个div（1 div将保存图标＆另一个描述性文本，请注意我无法更改html标记）。
在IE7中，div中的2个div并排放置，而按钮标签中的2个div位于另一个下方.1 是否有特定的按钮标签将潜水1排列在彼此之下，是否可以被任何IE7黑客或css技巧覆盖？

<!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>

Answer 1

试试这个在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;
        }

Answer 2

如果你不想给按钮一个宽度，那就尽可能接近。

<!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>

现在这远非理想，我可以看到，但也许它会给你一些开始。

IE7 - 尝试将两个相邻的div放在按钮标记中

2 个答案: