Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/38.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
媒体css3在safari浏览器上不工作_Css_Twitter Bootstrap_Safari_Media Queries - Fatal编程技术网

媒体css3在safari浏览器上不工作

媒体css3在safari浏览器上不工作,css,twitter-bootstrap,safari,media-queries,Css,Twitter Bootstrap,Safari,Media Queries,我正在为浏览器或小型设备上显示的3>>2>>1列自定义引导。我使用了css3媒体查询,它可以在除Safari之外的所有浏览器上运行。以下是我使用的css。它总是使用第一个媒体查询,因此它在Safari上引起了问题。我已经测试了Mac和WindowSafari,并且遇到了同样的问题。请帮忙 在HTML标题部分添加的视口 <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, ma

我正在为浏览器或小型设备上显示的3>>2>>1列自定义引导。我使用了css3媒体查询,它可以在除Safari之外的所有浏览器上运行。以下是我使用的css。它总是使用第一个媒体查询,因此它在Safari上引起了问题。我已经测试了Mac和WindowSafari,并且遇到了同样的问题。请帮忙

在HTML标题部分添加的视口

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

Bootstrap明确不支持Windows Safari,如其浏览器支持文档中所述。

看起来您在@media(最小宽度:1632)之后缺少了“px”


这应该可以解决问题。

为什么不在第一次媒体查询中使用单元?e、 g.
@media(最小宽度:1632px)
omg…我犯了多大的错误。我一直在寻找我的代码,以找出愚蠢的错误,自上两周以来,但无法找到…感谢您的观察。它现在可以工作了:-)这并不一定意味着该页面在Safari上就不能工作。他们也没有在他们的网站上提到Linux版本的Firefox和Opera,但是这些版本和Windows版本在引导页面的行为上没有明显的区别。我们不应该只看支持或不支持什么……我们应该坚持基本标准,然后看看不支持什么。
/*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;
    }
}
@media (min-width:1632px)