Html 通过<;链接>;标签

Html 通过<;链接>;标签,html,css,cross-browser,Html,Css,Cross Browser,我有一个很奇怪的问题。以下是我正在使用的HTML: <!DOCTYPE HTML> <html> <head> <style type='text/css'> <title>Site name</title> *{ padding: 0px; margin: 0px;

我有一个很奇怪的问题。以下是我正在使用的HTML:

<!DOCTYPE HTML>
<html>
    <head>
        <style type='text/css'>
        <title>Site name</title>
            *{
                padding: 0px;
                margin: 0px;
                
                font-family: sans-serif;
            }
            
            html{
                background: #BED4EB;
            }
            
            body{
                background: #FFFFFF;
                width: 1000px;
                margin: 0px auto;
                padding-bottom: 25px;
            }
            
            header{
                background-image: linear-gradient(to bottom, #004F9E 0%, #00284F 100%);
                
                padding: 10px 0px;
            }
                header h1{
                    color: #FFFFFF;
                    display: inline;
                    font-size: 2.5em;
                }
                header nav{
                    display: inline-block;
                    float: right;
                }
                    header nav ul li{
                        margin: 0px 20px;
                        
                        display: inline-block;
                    }
                        header nav ul li a{
                            color: #FFFFFF;
                            
                            text-decoration: none;
                            
                            font-size: 1.4em;
                        }
                        header nav ul li a:hover{
                            color: #FFA54D;
                        }
            
            section#quick_login{
                width: 20%;
                float: right;
                background: #91A9FA;
                border: 1px solid #5D82FC;
                margin: 0px 0px 5px 5px;
                padding: 5px;
                text-align: center;
            }
                section#quick_login input{
                    padding: 3px;
                    border-radius: 3px;
                    border: 1px solid #BDBDBD;
                }
            
            section#notices{
                display: inline-block;
                width: 75%;
            }
                section#notices .alert, section#notices .notice{
                    padding: 5px;
                    display: inline-block;
                }
                section#notices .alert{
                    background: #FA9191;
                    border: 1px solid #FC5D5D;
                }
                section#notices .notice{
                    background: #91A9FA;
                    border: 1px solid #5D82FC;
                }
                    
            section#main h2{
                margin-top: 25px;
            }
            section#main p{
                margin-top: 5px;
            }
        </style>
    </head>
    <body>
        <header>
            <h1>Site name</h1>
            <nav>
                <ul>
                    <li>
                        <a href='#'>Link 1</a>
                    </li>
                    <li>
                        <a href='#'>Link 2</a>
                    </li>
                    <li>
                        <a href='#'>Link 3</a>
                    </li>
                    <li>
                        <a href='#'>Link 4</a>
                    </li>
                    <li>
                        <a href='#'>Link 5</a>
                    </li>
                </ul>
            </nav>
        </header>
        
        <section id='quick_login'>
            <h2>Quick login</h2>
            <form action='login.php'>
                Username: <input type='text' placeholder='Your username' name='username' />
                <br />Password: <input type='password' placeholder='Your password' name='password' />
                <br /><input type='submit' value='Go' />
            </form>
        </section>
        
        <section id='notices'>
            <p class='alert'>
                Your email address hasn't been verified; check your email for a link to verify it.
            </p>
            <p class='notice'>
                We received a record 553 visitors yesterday!
            </p>
        </section>
        
        <section id='main'>
            <h2>Subtitle 1</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nisl risus, viverra eu sollicitudin volutpat, ultricies vel sapien. Cras in felis eu justo mattis convallis vel et orci. Maecenas consequat fermentum magna, sit amet dapibus nulla pulvinar venenatis. Nullam nulla mi, consectetur id diam at, pulvinar tempus diam. Morbi suscipit odio nec arcu ultricies dignissim. Curabitur consectetur libero lectus, ornare sodales tellus congue nec. Nam id tellus id nulla eleifend condimentum.</p>
            
            <h2>Subtitle 2</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lacus nisi, mattis vitae volutpat tempus, suscipit nec lorem. Quisque posuere lectus odio, porttitor sagittis ligula ullamcorper quis. Vivamus ornare ut sapien in rutrum. Nullam et porttitor metus. Curabitur ornare orci sit amet aliquam rutrum. Phasellus scelerisque dignissim tellus in dictum. Pellentesque eu nibh purus. Nulla scelerisque sodales urna in feugiat. Maecenas et eleifend neque. Sed dolor turpis, congue et nisl quis, euismod bibendum magna. Sed eget laoreet urna.</p>
        </section>
    </body>
</html>

站点名称
*{
填充:0px;
边际:0px;
字体系列:无衬线;
}
html{
背景:#BED4EB;
}
身体{
背景:#FFFFFF;
宽度:1000px;
保证金:0px自动;
垫底:25px;
}
标题{
背景图像:线性渐变(至底部,#004F9E 0%,#00284F 100%);
填充:10px 0px;
}
收割台h1{
颜色:#FFFFFF;
显示:内联;
字号:2.5em;
}
标题导航{
显示:内联块;
浮动:对;
}
标题nav ul li{
利润率:0px 20px;
显示:内联块;
}
标题nav ul li a{
颜色:#FFFFFF;
文字装饰:无;
字号:1.4em;
}
收割台导航ul li a:悬停{
颜色:#FFA54D;
}
第#快速登录部分{
宽度:20%;
浮动:对;
背景:#91A9FA;
边框:1px实心#5D82FC;
保证金:0px 0px 5px 5px;
填充物:5px;
文本对齐:居中;
}
第#快速登录输入部分{
填充:3倍;
边界半径:3px;
边框:1px实心#BDBDBD;
}
第#节通知{
显示:内联块;
宽度:75%;
}
第#节通知。警报,第#节通知。通知{
填充物:5px;
显示:内联块;
}
第#节通知。警报{
背景#FA9191;
边框:1px实心#FC5D5D;
}
第#节通知。通知{
背景:#91A9FA;
边框:1px实心#5D82FC;
}
第#节主h2{
边缘顶部:25px;
}
第#节主p{
边缘顶部:5px;
}
站点名称
快速登录 用户名:
密码:

您的电子邮件地址尚未验证;检查电子邮件中的链接以进行验证。

昨天我们接待了创纪录的553名游客!

副标题1 Lorem ipsum dolor sit amet,是一位杰出的献身者。Integer nisl risus,viverra eu sollicitudin Volatit,ultricies vel sapien。猫科动物身上的粗毛就像马蒂斯·康瓦利斯(mattis convallis vel et orci)。这是一个巨大的发酵过程,是一个巨大的发酵过程。无极无极,无极直径,枕叶节拍直径。Morbi suscipit odio nec arcu ultricies Dignessim。自由女神像,或是圣母院。Nam id tellus id nulla eleifend调味品

副标题2 Lorem ipsum dolor sit amet,是一位杰出的献身者。毛里斯·拉库斯·尼西,生命之路,生命之路。奥迪奥·波苏尔·莱克托斯·波苏尔·奥迪奥,乌拉姆科佩尔·奎斯·波苏尔·莱克托斯·乌兰科佩尔·波苏尔·波苏尔·莱克托斯。芦苇中的维瓦摩斯。无门无门。红葡萄酒。格言中的权杖。佩伦茨克欧盟尼布·普卢斯。《封建主义》中的努拉权杖。梅塞纳斯和埃利芬德内克。塞德·多洛·图皮斯、康格·尼斯奎斯、尤伊斯莫·比本杜姆·麦格纳。塞德·埃吉特·拉奥里特·乌尔纳

它显示得非常完美(除了我正在处理的非垂直对齐菜单):


(来源:)

但是,当我用
替换
标记并将
标记中的所有内容复制/粘贴到style.css中时,它显示如下:


(来源:)


这是什么原因造成的?我怎么修理它?它似乎是特定于浏览器的,因为Firefox完美地显示了它。只有在Chrome中才会出现错误。

也许你应该试试。它会检查你的HTML或CSS(上传style.CSS)是否有错误。如果不起作用,我要求您共享HTML代码或提供一个网址。

这似乎是由于未正确遵循
标题h1{display:inline;}
规则造成的

如果在页面中包含css时禁用此规则,则会导致通过链接标记包含样式表时出现的呈现中断

此外,标题标签应直接位于标题下方,且无
<!DOCTYPE HTML>
<html>
    <head>
        <style type='text/css'>
        <title>Site name</title>
            *{
                padding: 0px;
                margin: 0px;

                font-family: sans-serif;
            }

            html{
                background: #BED4EB;
            }

            body{
                background: #FFFFFF;
                width: 1000px;
                margin: 0px auto;
                padding-bottom: 25px;
            }

            header{
                background-image: linear-gradient(to bottom, #004F9E 0%, #00284F 100%);

                padding: 10px 0px;
            }
                header h1{
                    color: #FFFFFF;
                    display: inline;
                    font-size: 2.5em;
                }
                header nav{
                    display: inline-block;
                    float: right;
                }
                    header nav ul li{
                        margin: 0px 20px;

                        display: inline-block;
                    }
                        header nav ul li a{
                            color: #FFFFFF;

                            text-decoration: none;

                            font-size: 1.4em;
                        }
                        header nav ul li a:hover{
                            color: #FFA54D;
                        }

            section#quick_login{
                width: 20%;
                float: right;
                background: #91A9FA;
                border: 1px solid #5D82FC;
                margin: 0px 0px 5px 5px;
                padding: 5px;
                text-align: center;
            }
                section#quick_login input{
                    padding: 3px;
                    border-radius: 3px;
                    border: 1px solid #BDBDBD;
                }

            section#notices{
                display: inline-block;
                width: 75%;
            }
                section#notices .alert, section#notices .notice{
                    padding: 5px;
                    display: inline-block;
                }
                section#notices .alert{
                    background: #FA9191;
                    border: 1px solid #FC5D5D;
                }
                section#notices .notice{
                    background: #91A9FA;
                    border: 1px solid #5D82FC;
                }

            section#main h2{
                margin-top: 25px;
            }
            section#main p{
                margin-top: 5px;
            }
        </style>
    </head>
    <body>
        <header>
            <h1>Site name</h1>
            <nav>
                <ul>
                    <li>
                        <a href='#'>Link 1</a>
                    </li>
                    <li>
                        <a href='#'>Link 2</a>
                    </li>
                    <li>
                        <a href='#'>Link 3</a>
                    </li>
                    <li>
                        <a href='#'>Link 4</a>
                    </li>
                    <li>
                        <a href='#'>Link 5</a>
                    </li>
                </ul>
            </nav>
        </header>

        <section id='quick_login'>
            <h2>Quick login</h2>
            <form action='login.php'>
                Username: <input type='text' placeholder='Your username' name='username' />
                <br />Password: <input type='password' placeholder='Your password' name='password' />
                <br /><input type='submit' value='Go' />
            </form>
        </section>

        <section id='notices'>
            <p class='alert'>
                Your email address hasn't been verified; check your email for a link to verify it.
            </p>
            <p class='notice'>
                We received a record 553 visitors yesterday!
            </p>
        </section>

        <section id='main'>
            <h2>Subtitle 1</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nisl risus, viverra eu sollicitudin volutpat, ultricies vel sapien. Cras in felis eu justo mattis convallis vel et orci. Maecenas consequat fermentum magna, sit amet dapibus nulla pulvinar venenatis. Nullam nulla mi, consectetur id diam at, pulvinar tempus diam. Morbi suscipit odio nec arcu ultricies dignissim. Curabitur consectetur libero lectus, ornare sodales tellus congue nec. Nam id tellus id nulla eleifend condimentum.</p>

            <h2>Subtitle 2</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lacus nisi, mattis vitae volutpat tempus, suscipit nec lorem. Quisque posuere lectus odio, porttitor sagittis ligula ullamcorper quis. Vivamus ornare ut sapien in rutrum. Nullam et porttitor metus. Curabitur ornare orci sit amet aliquam rutrum. Phasellus scelerisque dignissim tellus in dictum. Pellentesque eu nibh purus. Nulla scelerisque sodales urna in feugiat. Maecenas et eleifend neque. Sed dolor turpis, congue et nisl quis, euismod bibendum magna. Sed eget laoreet urna.</p>
        </section>
    </body>
</html>