css - 为什么 Ajaxify'ing 标准 MVC Razor Web 应用程序会产生移动 CSS 样式？

Question

在用 Ajaxify 跳下深渊之前在一个大型 Razor 元素中，我认为最好创建一个 MVC4/Razor 测试平台应用程序并进行试用。

复制:

1. 在 VS 2012 中创建了标准的 MVC4/Razor Web 应用程序

2. 添加了必需的 JQuery 加载项文件(在 Razor 元素模板中默认情况下已经有 JQuery 1.8.2)。

将其添加到 BundleConfig.RegisterBundles

bundles.Add(new ScriptBundle("~/bundles/ajaxify").Include(
            "~/Scripts/jquery-scrollto-{version}.js",
            "~/Scripts/jquery.history-{version}.js",
            "~/Scripts/ajaxify-html5-{version}.js"
            ));

注意:我将所有加载项重命名为 MS 标准 ~/scripts/addinname-9.9.9.js 格式，以便于升级

在Views/Shared/_Layout.cshtml底部添加一行

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/ajaxify")    <=== ADDED THIS LINE
@RenderSection("scripts", required: false)

当我运行网络应用程序时，主页正常出现(如预期)，但联系页面使用移动样式出现。为了验证这一点，我在该媒体选择器中将正文设为黄色，果然，它启动了 Ajaxified(动态加载)关于页面:

这些 CSS 样式在以下选择器内的 CSS 中定义:

@media only 屏幕和(最大宽度:850px)

如果您调整页面大小或刷新浏览器，页面会自行更正:

我很惊讶这是可能的，因为媒体选择器是依赖于分辨率的，所以我想看看是否有人可以阐明原因。 浏览器窗口始终大于 850 像素，因此根本不应显示移动样式。

实际问题是:

为避免进一步混淆，实际问题是:我需要知道为什么媒体过滤器选择器会触发，即使屏幕大于指定的最小尺寸？

更新:

我将标准 MVC4/Razor CSS 移动样式部分减少到下面的最小值，但问题仍然存在。如果我删除了 float: none，问题就不会发生:

/********************
*   Mobile Styles   *
********************/
@media only screen and (max-width: 850px) {
    body{
        background-color: yellow;
    }
    /* header
    ----------------------------------------------------------*/
    header .float-left,
    header .float-right {
        float: none;
    }
}

Answer 1

根据所提供的详细信息，我会说问题仅在于 float ，只需更新 float 和一个标签

.header .float-left{float:left;}
.header .float-right{float:right;}
.clearfix{clear:both}

在标题 div 下面的 div 中使用这个 clearfix 类

<div class="header">
   //your codes
</div>
<div class="clearfix"></div>

我想这样就可以了..

编辑:Ajaxify 更新，

ajaxify的脚本文件中有这段代码，

// Prepare Variables
        var contentSelector = '#content,article:first,.article:first,.post:first',
        $content = $(contentSelector).filter(':first'),
        contentNode = $content.get(0),
        $menu = $('#menu,#nav,nav:first,.nav:first').filter(':first'),
        activeClass = 'active selected current youarehere',
        activeSelector = '.active,.selected,.current,.youarehere',
        menuChildrenSelector = '> li,> ul > li',
        completedEventName = 'statechangecomplete',
        /* Application Generic Variables */
        $window = $(window),
        $body = $(document.body),
        rootUrl = History.getRootUrl(),
        scrollOptions = {
                duration: 800,
                easing:'swing'
        };

现在澄清一下，您指定的 CSS 与 ajaxify.js 更改的 CSS 没有冲突，因此您一定缺少某些东西，我会说 AJAXIFY.js 不是那个谁在改变页面的行为，请发布您页面的实时链接或全部工作以获取更多详细信息。

更新:大型 Razor 网站。

如果您有 ajaxify 大型 Razor 元素，那不会改变行为；是的，它在 MVC4 中准备了强大的 html 对象，所以如果 Razor 代码或 html 页面代码或母版页代码中有一些标准忽略。这将会发生，我将坚持我的投票，即 Ajaxify 不会改变行为，它是在移动网站下分类的其他东西。

更新:删除 float

删除 float:none 有帮助 --> 证明这是一个 float 问题，在这个节点之前没有得到注意..

我想将简化 CSS 添加到常用的基页/母版页，因为 ajaxify 调用页面，如果未加载该 razor 页面的 CSS，也会出现此问题。