两个小引导CSS风格，使Firefox和Chrome的页面看起来完全不同？例如里面

下面是代码：jsFiddle 两个小引导CSS风格，使Firefox和Chrome的页面看起来完全不同？例如里面

它看起来正确的Chrome（单选按钮都OK，虽然3 6的单选按钮都留给了浏览器的左边框），但在Firefox看起来完全不同（在Firefox中的单选按钮被弄乱）。

如何解决与CSS样式的问题？ 这些样式来自twitter引导，因此它们只能被忽略。

此外，如果可能的话，html不能被触及，只有css。这是一个crossbrowser错误？它看起来完全不同的原因是什么？

完整的代码是在这里：

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 


     <style> 

      label 
      { 
       display  : block; 
       margin-bottom : 5px 
      } 

      .radio input[type="radio"], .checkbox input[type="checkbox"] 
      { 
       float  : left; 
       margin-left : -18px 
      } 

     </style> 


    </head> 
    <body> 


     <div style="border:1px solid red; "> 
      <label class="radio"> 
       <input name="count" value="A" type="radio"> 
       A </label> 
      <label class="radio"> 
       <input name="count" value="B" type="radio"> 
       B </label> 
      <label class="radio" style="border:1px solid blue;"> 
       <input name="count" value="C" type="radio"> 
       C </label> 
     </div> 

     <div style="margin-left: 300px; margin-top: -70px;"> 
      <label class="radio"> 
       <input name="count2" value="D" type="radio"> 
       D </label> 
      <label class="radio"> 
       <input name="count2" value="E" type="radio"> 
       E </label> 
      <label class="radio"> 
       <input name="count2" value="F" type="radio"> 
       F </label> 
     </div> 


    </body> 
</html>

来源

2012-11-22 Haradzieniec

的问题是你的浮动。

从

.radio input[type="radio"], .checkbox input[type="checkbox"]

来源

2012-11-22 15:47:49

谢谢，但正如我上面提到的，我不能修改twitter bootstrap。我只能改写他们的风格。 – Haradzieniec

你可以覆盖你的默认CSS –

删除留下的浮动。如果我理解正确的话，float和保证金左正在引导设置为您不希望值。

为了覆盖它们，您需要做的就是将样式添加到您的页面（或者最好是引导覆盖css文件，即添加引导后添加的文件），以覆盖您不想要的引导值。

.radio input[type="radio"], .checkbox input[type="checkbox"] 
      { 
       float  : none; 
       margin-left : 0px 
      }

来源

2012-11-23 03:20:46 tocallaghan

两个小引导CSS风格，使Firefox和Chrome的页面看起来完全不同？例如里面

回答

相关问题