css - 如何在不同的浏览器中制作相同的边距？ UL 利润率-6ren

css - 如何在不同的浏览器中制作相同的边距？ UL 利润率

转载作者：行者123 更新时间：2023-11-28 13:50:58

25

4

UL 元素边距相同，但 Firefox 和 IE 显示不同。

alt text

完整代码:

    <html>
    <head>
        <style>
            body
            {
                background-color: Red;
            }
            ul
            {
                font-family: Verdana;
                font-size: 8pt;
            }
            ul a
            {
                text-decoration: none;
                color: Black;
            }
            ul a:hover
            {
                text-decoration: underline;
            }
            table
            {
                background-color: Transparent;
                border-collapse: collapse;
            }
            table tr td
            {
                vertical-align: top;
                text-align: left;
                font: Verdana, Geneva, sans-serif;
                font-size: 12px;
            }
            #tblYayinAkisi
            {
                border: 1px white solid;
                background-color: #222222;
                font-family: Verdana;
                color: #ffffff;
                vertical-align: middle;
                font-size: 10pt;
                width: 100%;
            }
            #tblYayinAkisi th
            {
                background-color: Transparent;
                background-image: url(../images/bckSiyahGriTram.png);
                background-repeat: repeat-x;
                height: 20px;
                padding-left: 10px;
            }
            #tblYayinAkisi td
            {
                background-color: #222222;
            }
            #tblYayinAkisi td ul
            {
                border: 1px white solid;
                width: 100%;
                margin-left: 10px;
            }
            #tblYayinAkisi td ul li
            {
                clear: both;
                padding-top: 7px;
                list-style: none;
            }
            #tblYayinAkisi td ul li b
            {
                margin-right: 10px;
                float: left;
            }
            #tblYayinAkisi td ul li a
            {
                color: #ffffff;
                float: left;
            }
        </style>
    </head>
    <body>
        <table id="tblYayinAkisi">
            <tbody>
                <tr>
                    <th>
                        YABAN'da bugün
                    </th>
                </tr>
                <tr>
                    <td>
                        <ul>
                            <li><b>00:00</b><a target="_blank" href="programlar.aspx?id=24">TROFE ODASI</a></li>
                            <li><b>01:00</b><a target="_blank" href="programlar.aspx?id=17">YERLİ YABAN</a></li>
                            <li><b>01:30</b><a target="_blank" href="programlar.aspx?id=16">HEDEF</a></li>
                            <li><b>02:00</b><a target="_blank" href="programlar.aspx?id=28">İZCİ</a></li>
                            <li><b>02:30</b><a target="_blank" href="programlar.aspx?id=4">KUŞLAR</a></li>
                        </ul>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div style="text-align: center;">
                            <img src="images/canliYayin.png" />
                            <img src="images/tumAkis.png" />
                        </div>
                        <br />
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
    </html>

最佳答案

将此添加到您的第一个 ul 声明中:

ul { padding: 0; margin: 0; list-style: none }

您需要调整您的其他 ul 声明(即 margin-left: 10px)以满足您的需要，但此规则会将差异归零。

原因是每个浏览器使用不同的 padding 和 margin 组合来缩进 ul。通过将两者归零并仅设置一个(即 padding 或 margin)，您可以保持显示一致。

此外，您需要在代码中使用有效的 DOCTYPE，这样现代浏览器就不会恢复到 Quirks 模式。像这样的东西放在你的 HTML 文件的最顶部，前面没有任何东西:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

关于css - 如何在不同的浏览器中制作相同的边距？ UL 利润率，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2079518/

25

4

0

文章推荐： CSS 布局和 IE 6

文章推荐： css - 如何防止将 css 属性传递给内部元素？

文章推荐： html - 如何在 CSS 中表示双单元格格式？

文章推荐： javascript - 导航列表问题

jQuery:仅选择 ul，而不选择 ul ul
我正在尝试使用 jQuery 来提交一个基本的 Accordion 样式菜单。这是菜单: http://www.cybart.com/bscg/ 这是为其提供 Accordion 功能的代码片段:
html - 增加嵌套 (ul ul ul li) 下拉导航列表项的宽度
这是我的网站: http://www.simply-a-christian.com/index.html 在导航栏上，如果您移动到: 信念玛丽安教义您可以看到每个 Marian Dogma(列出了
jquery - 当 ul ul 活跃时 ul parent 移动
这可能是一个很容易回答的问题，但是，我找不到解决方案。我已经建立了一个非常简单的菜单，每当我将鼠标悬停在 ul 父项上时，它的子项 ul ul 就会变得可见。基本上它是有效的，但 parent 让位于
HTML 下拉菜单 : "nav ul ul ul li" Too Low
这是一张图片: 问题是(你可以看到):“页面”按钮太低，无法点击。我想要的是它应该靠近“联系人”。现在是代码: HTML Home About
jquery - 如何在不破坏每个

首页

博学

6Ren·AI

商城

css - 如何在不同的浏览器中制作相同的边距？ UL 利润率