媒体css3不能在Safari浏览器上工作

我自定义引导程序3 >> 2 >> 1列显示在浏览器调整大小或小设备上。我使用了css3媒体查询，它可以在除Safari之外的所有浏览器上工作。以下是我用过的CSS。它始终使用第一个媒体查询，并因此导致Safari出现问题。我测试了Mac和Window Safari并面临同样的问题。请帮忙。媒体css3不能在Safari浏览器上工作

视口添加在HTML头部分

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />

CSS3使用：

/*Apply different margin based on media size*/ 
@media (min-width:1632) 
{ 
.two-column .row-fluid [class*="span"]:nth-child(3n+1) 
    { 
     margin-left:100px; 
    } 
} 

@media (min-width: 981px) and (max-width: 1631px) 
{ 
    .two-column .row-fluid [class*="span"]:nth-child(2n+1) 
    { 
    margin-left:100px; 
    } 

} 

@media (min-width: 982px) and (max-width: 1155px) 
{ 
    .two-column .row-fluid [class*="span"]:nth-child(2n+1) 
    { 
    margin-left:10px; 
    } 

} 

@media (min-width: 545px) and (max-width: 981px) 
{ 
    .two-column .row-fluid .span6 
    { 
    margin-left:5%; 
    } 

} 


@media (max-width: 546px) 
{ 
    .two-column .row-fluid .span6 
    { 
    margin-left:5px; 
    } 
}

来源

2013-09-30 joy

为什么不在第一个媒体查询中使用单位？例如'@media（min-width：1632px）' – Adrift

omg ....我有一个失误的错误。我一直在寻找我的代码，以找出从过去两个星期以来愚蠢的错误，但无法找到.....感谢您的观察。它的工作现在:-) – joy

引导明确不支持Windows的Safari在其浏览器支持文档中阐明。

来源

2013-10-22 06:27:50 HTung

这并不一定意味着该页面将无法在Safari上运行。他们也没有在他们的网站上提及Firefox和Opera的Linux版本，但Bootstrapped页面在这些版本和Windows版本之间的行为并没有明显的差异。 –

同意。我们不应该被支持或不支持...我们应该坚持基本标准，然后看看什么是不支持的。 – joy

看起来你失踪后@media的 '像素'（最小宽度：1632）

@media (min-width:1632px)

这应该修复它。

来源

2014-02-23 13:15:00 hawaiianchimp

媒体css3不能在Safari浏览器上工作

回答

相关问题