谷歌浏览器的CSS问题

时间：2016-06-23 16:51:10

标签： html css google-chrome browser

为什么我在谷歌浏览器中遇到css问题？我下载了一个bootstrap主题，复制粘贴一切，一切在每个浏览器（firefox，边缘，IE，safary）都很完美，除了google chrome（歌剧中同样的问题，但不是一个大问题）。

我将展示一些代码和截图。

 <div id="wrapper">
    <!-- Navigation -->
    <nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" asp-controller="Reports" asp-action="Index">Online Report Manager</a>
        </div>

        <!-- /.navbar-top-links -->

它在Firefox中的显示方式

enter image description here

如何在Chrome中

enter image description here

因此Chrome中有一些额外的空间，搜索图标更小！

弹出对话框错误：

代码：

$(window).on('resize', function () {
        $(".dialogOnResize").css({ 'position': 'fixed', 'top': '50%', 'margin-top': '-110px', 'left': '50%', 'margin-left': '-165px' });
    });

    dialogDiv.dialog({
        title: "Confirm Delete",
        autoOpen: false,
        modal: true,
        draggable: false,
        resizable: false,
        closeOnEscape: false,
        minWidth: 340,
        minHeight: 220,
        create: function (event) { $(event.target).parent().css({'position': 'fixed', 'top': '50%', 'margin-top': '-110px', 'left': '50%', 'margin-left': '-165px' }).addClass('dialogOnResize'); },
        open: function (event, ui) {
            $(".ui-dialog-titlebar-close", ui.dialog | ui).hide();
        },
        buttons: {

在Firefox中（大屏幕） enter image description here

在Firefox中（屏幕较小，手机屏幕尺寸较小） enter image description here

它出现在中心。

Chrome的相同代码（大屏幕） enter image description here

它不在窗口的中心，而是在文档的中心，所以如果数据表中有更多的记录，弹出窗口会一直向下和向下，直到失去视线。

当我以小尺寸启动项目时，与小屏幕（手机大小）的Chrome相同的情况 enter image description here

当我向上/向下滚动时，它也应该保持在中心位置，在这种情况下，它不会停留在那里，看不见。

但是，如果我拖动窗口角落并改变大小仅1px（它得到修复）： enter image description here

此外，通过在大尺寸项目启动后更改屏幕大小（从大到小），弹出窗口将跟随屏幕中心。因此，在chrome中，弹出窗口仅在浏览器大小更改后才会对齐。

1 个答案:

答案 0 :(得分：1)

浏览器具有不同的HTML规范实现，每个实现略有不同，没有完全符合标准。这就是为什么网站有时在不同的浏览器中看起来不同。您可以使用www.caniuse.com或MDN等网站查看浏览器对不同功能的支持。

相关问题
最新问题