Html 按钮元素中的多行样式文本

我尝试在网页上放置两个按钮，一个浮动到左边，另一个浮动到右边。两个命令按钮中都有多行样式的文本。下面是我的最新尝试。它在Firefox中似乎可以工作，但在IE8中甚至不能工作。有没有办法让它在两种环境下都工作？谢谢

CSS:

body {
    background-color: green;
}

.idxQuestion {
    font-size: 36;
    text-align: center;
}

.idxButtons {
    margin-top:60px;
    margin-left: auto;
    margin-right:auto;
    width:350px;
}

.buttonchoice1,.buttonchoice2
           {
    text-align: center;
    background:white;
    padding: 5px;
}

.buttonchoice1 {
    float:left; 
    border:5px solid red;
}

.buttonchoice2 {
    float:right;
    border:5px solid blue;
}   

.spanchoice1 {
    font-size: 30px;             
}

.spanchoice2 {
    font-size: 10px;             
}   

<div class="idxQuestion">
    <h1>Big Question?</h1>
</div>
<div class="idxButtons">
    <h:button class="buttonchoice1" onclick="option1?faces-redirect=true" >
        <h:outputText escape=false>
            <span class="spanchoice1">No</span><br />  
            <span class="spanchoice2">additional info 1</span> 
        </h:outputText>
    </h:button> 

    <h:button class="buttonchoice2" onclick="option2?faces-redirect=true" >
        <h:outputText>
            <span class="spanchoice1">Yes</span><br />  
            <span class="spanchoice2">additional info 2</span> 
        </h:outputText>
    </h:button> 

</div>   

HTML:

body {
    background-color: green;
}

.idxQuestion {
    font-size: 36;
    text-align: center;
}

.idxButtons {
    margin-top:60px;
    margin-left: auto;
    margin-right:auto;
    width:350px;
}

.buttonchoice1,.buttonchoice2
           {
    text-align: center;
    background:white;
    padding: 5px;
}

.buttonchoice1 {
    float:left; 
    border:5px solid red;
}

.buttonchoice2 {
    float:right;
    border:5px solid blue;
}   

.spanchoice1 {
    font-size: 30px;             
}

.spanchoice2 {
    font-size: 10px;             
}   

<div class="idxQuestion">
    <h1>Big Question?</h1>
</div>
<div class="idxButtons">
    <h:button class="buttonchoice1" onclick="option1?faces-redirect=true" >
        <h:outputText escape=false>
            <span class="spanchoice1">No</span><br />  
            <span class="spanchoice2">additional info 1</span> 
        </h:outputText>
    </h:button> 

    <h:button class="buttonchoice2" onclick="option2?faces-redirect=true" >
        <h:outputText>
            <span class="spanchoice1">Yes</span><br />  
            <span class="spanchoice2">additional info 2</span> 
        </h:outputText>
    </h:button> 

</div>   

大问题？
否

附加信息1
是

附加信息2

---

Fiddle:

IE无法识别您的h:button标记，您已将“ButtonCoice1”类应用于该标记，它是布局的基础。如果要用div（例如）包装那些“h:button”，并将类从h:button移动到新的包含div的位置，它应该可以工作。像这样：

<div class="idxButtons">
    <div class="buttonchoice1">
        <h:button onclick="option1?faces-redirect=true" >
        <h:outputText escape=false>
        <span class="spanchoice1">No</span><br />  
        <span class="spanchoice2">additional info 1</span> 
        </h:outputText>
        </h:button> 
    </div>
....

否

附加信息1
....

用以下代码替换您的代码：

<div class="idxButtons">
    <button class="buttonchoice1" onclick="option1?faces-redirect=true">
        <outputText escape=false>
           <span class="spanchoice1">No</span><br />  
           <span class="spanchoice2">additional info 1</span> 
        </outputText>
     </button>
    <button class="buttonchoice2" onclick="option2?faces-redirect=true">
        <outputText>
           <span class="spanchoice1">Yes</span><br />  
           <span class="spanchoice2">additional info 2</span> 
        </outputText>
     </button>
</div>

否

附加信息1
是

附加信息2

为什么不制作图像并使用

使其看起来相同？我不认为

按钮应该是花哨的。
这个“h”标签是从哪里来的？我猜他是在将ASP.NET代码直接粘贴到html页面上。正如我们所知道的那样，IE呈现不正确，只需从你的标记中删除所有
h:
，因为有时我认为我是CSS中唯一一个不知道
h
标签的人。hehe@Mr_Greencss3重新加载..对不起，我使用的是JSF，这就是h:的来源是的，删除了h:修复了它。谢谢。我刚刚意识到，如果我向左或向右浮动按钮，按钮会向外浮动或正常流动，但不是outputText，因此文本在按钮之外。