个人中心
gpt4 book ai didi

html - 在 URL 中使用主机名时媒体查询不起作用

转载 作者：太空宇宙 更新时间：2023-11-04 10:43:25 25 4
gpt4 key购买 nike

我正在设计一个包含图像和表格的响应式 html 页面。请参阅下面的 html 代码块。

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset='UTF-8'>

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <style>
            * {
                margin: 0;
                padding: 0;
            }

            body {
                /*font: 14px/1.4 Georgia, Serif;*/
                font-size: 11.0pt;
                font-family: "Calibri","sans-serif";
            }

            #page-wrap {
                margin: 5px;
            }

            p {
                margin: 20px 0;
            }

            /*
                        Generic Styling, for Desktops/Laptops
                        */
            table {
                width: 100%;
                border-collapse: collapse;
            }
            /* Zebra striping */
            tr:nth-of-type(odd) {
                background: #eee;
            }

            th {
                background: #5388FF;
                color: white;
                font-weight: bold;
            }

            td, th {
                padding: 6px;
                border: 1px solid #ccc;
                text-align: left;
            }
        </style>


        <style>
            @media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {

                img {
                    width: 100%;
                }

                /* Force table to not be like tables anymore */
                table, thead, tbody, th, td, tr {
                    display: block;
                }

                    /* Hide table headers (but not display: none;, for accessibility) */
                    thead tr {
                        position: absolute;
                        top: -9999px;
                        left: -9999px;
                    }

                tr {
                    border: 1px solid #ccc;
                }

                td {
                    /* Behave  like a "row" */
                    border: none;
                    border-bottom: 1px solid #eee;
                    position: relative;
                    padding-left: 50%;
                }

                    td:before {
                        /* Now like a table header */
                        position: absolute;
                        /* Top/left values mimic padding */
                        top: 6px;
                        left: 6px;
                        width: 45%;
                        padding-right: 10px;
                        white-space: nowrap;
                    }

                    /*
                Label the data
                */
                    td:nth-of-type(1):before {
                        content: "Employee ID";
                    }

                    td:nth-of-type(2):before {
                        content: "Employee Name";
                    }

                    td:nth-of-type(3):before {
                        content: "Employee Address";
                    }

                    td:nth-of-type(4):before {
                        content: "Employee Phone";
                    }
            }

            /* Smartphones (portrait and landscape) ----------- */
            @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
                body {
                    padding: 0;
                    margin: 0;
                    width: 320px;
                }

                img {
                    width: 100%;
                }
            }

            /* iPads (portrait and landscape) ----------- */
            @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
                body {
                    width: 495px;
                }

                img {
                    width: 100%;
                }
            }
        </style>
    </head>

    <body>


        <div id="page-wrap">

            <img max-width="100%" src="Images/image001.png">

            <table>
                <thead>
                    <tr>
                        <th>Employee ID</th>
                        <th>Employee Name</th>
                        <th>Employee Address</th>
                        <th>Employee Phone</th>

                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>101</td>
                        <td>John Smith</td>
                        <td>US</td>
                        <td>45454545</td>
                    </tr>
                    <tr>
                        <td>102</td>
                        <td>Dave Furber</td>
                        <td>US</td>
                        <td>45454546</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>

    </html>

当我使用 http://mymachine:6000/test.html 这样的主机名浏览 html 页面时，媒体查询在 IE11 中不起作用，但在 Chrome 中起作用。

但是，当我在 URL 中使用 IP 浏览页面时，媒体查询工作正常，页面在所有设备的 Chrome 和 IE 11 中正确呈现。

有人可以向我提供有关如何解决此问题的意见吗？

谢谢，维纳亚克语

最佳答案

出于某种原因，IE 使用 IE7 模式呈现此页面。引用:Link添加以下标签解决了问题!!

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

谢谢，

维纳亚克语

关于html - 在 URL 中使用主机名时媒体查询不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35625205/

25 4 0
文章推荐： java - 如何在 ZKOSS 中的指定字符上自动换行标签内容
文章推荐： python - 如何在元组列表中查找用户定义的最小值和最大值
文章推荐： linux - 使用 apt-get 安装找不到包
文章推荐： javascript - 在 JS 中绑定(bind)时应用 css
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com