Html 该网站在Brave和MicrosoftEdge（基于铬）中运行良好，但在Firefox中存在问题_Html_Css_Firefox_Responsive Design

Html 该网站在Brave和MicrosoftEdge（基于铬）中运行良好，但在Firefox中存在问题

html css firefox responsive-design

Html 该网站在Brave和MicrosoftEdge（基于铬）中运行良好，但在Firefox中存在问题,html,css,firefox,responsive-design,Html,Css,Firefox,Responsive Design,该网站运行完全正常，但firefox的响应能力存在一些问题。某些部分隐藏而不是显示，而不是收缩并适应窗口大小。 HTML和CSS是一样的，这是一个非常简单的网站，所以我不知道为什么在FF上我会有这些问题代码如下： <!DOCTYPE html> <html lang="it" dir="ltr"> <head> <link rel="stylesheet" href="styl

该网站运行完全正常，但firefox的响应能力存在一些问题。某些部分隐藏而不是显示，而不是收缩并适应窗口大小。 HTML和CSS是一样的，这是一个非常简单的网站，所以我不知道为什么在FF上我会有这些问题

代码如下：

<!DOCTYPE html>
<html lang="it" dir="ltr">

<head>
  <link rel="stylesheet" href="style.css">
  <link
    href="https://fonts.googleapis.com/css2?family=Domine:wght@400;700&family=Lora:ital,wght@0,400;0,600;0,700;1,400;1,500&family=Montserrat:wght@300;400;700&display=swap"
    rel="stylesheet">
  <link rel="icon" href="images/alebacce.ico">
<link href="mobile.css" rel="stylesheet" type="text/css" media="only screen and (max-width: 480px)" />
<link href="tablet.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 481px) and (max-width: 960px)" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta charset="utf-8">
  <title>Bacce's Angle</title>
</head>

<body>
  <nav>
   
        <label for="toggle">&#9776;</label>
        <input type="checkbox" id="toggle"/>
        <div class="menu">
            <a href="./baccesangle.html">Home</a>
            <a href="#chisono">Chi sono</a>
            <a href="#skills">Skills</a>
            <a href="#interessi">Interessi</a>
            <a href="#chiamami"><span class="contactmenu">Contattami</span></a>
        </div>
      </nav>

  <div class="main">
    <picture>
   <source 
      media="(min-width: 650px)"
      srcset="images/webdevlr2.png">
   <source 
      media="(max-width: 465px)"
      srcset="images/webdevlr2mobile.png">
   <img src="images/webdevlr2.png" 
   alt="Welcome on my site!">
</picture>
    <div class="welcome">
      <p>
        <h1><strong>ALESSANDRO BACCELLI</h1></strong>
      </p>
      <p><em>Work in progress</em> WEB DEVELOPER</p>
    </div>
  </div>

<div class="divide first">
  <div class="heading">
    <h1 id="chisono">Chi sono</h1>
  </div>
  <div class="section1">
    <div class="profile">
    <img src="images/profiledefmobile.png" alt="A picture of me">
    </div>
    <div class="biography">
      <p>Un ragazzo genovese di 24 anni, laureato in <em>Scienze della Comunicazione</em> da sempre appassionato di
        tecnologia e digitale. <br><br> Ho recentemente scoperto
        la mia passione per la programmazione grazie ai corsi di <strong><a
            href="https://www.start2impact.it/" target="blank">start2impact</a></strong>,
        iniziando il mio viaggio nel mondo di Html, CSS e via discorrendo... <br><br>
        Per quanto la strada sia ancora lunga ho fiducia nel futuro, questo sito vuole infatti essere l'inizio di un
        lungo percorso.</p>
         <div class="download">
    <button><a href="https://mega.nz/file/VNpETSiI#Z93X88NF5A-YwNvlLlN1qDqH9wesivKVRnLwK7WF9Hs" target="blank">Scarica il mio CV</a></button>
  </div>
    </div>
  </div>
  </div>



  <div class="divide colordifferent">
  <div class="heading margin">
    <h1 id="skills">Skills</h1>
  </div>
  <div class="section2">
    <div class="hard">
      <h2>Hard skills</h2>
      <ul>
        <li>Inglese fluente</li>
        <li class="modifiedli">HTML</li>
        <li class="modifiedli">CSS</li>
        <li>Canva</li>
      </ul>
    </div>
    <div class="soft">
      <h2>Soft skills</h2>
      <ul>
        <li>Autonomia</li>
        <li>Fast learner</li>
        <li>Empatia</li>
        <li>Ascolto attivo</li>
      </ul>
    </div>
  </div>
  </div>

  <div class="divide">
  <div class="heading bottomodif">
    <h1 id="interessi">Interessi</h1>
  </div>
  <div class="section2">
    <div class="inte hard">
      <ul>
        <li id="programmazione">Coding</li>
        <li id="foto">Fotografia digitale</li>
        <li id="grafica">Grafica</li>
        <li id="discover">Scoprire nuove cose</li>
        <li id="cucina">Cucina</li>
        <li id="videogiochi">Video-games</li>
      </ul>
    </div>
    <div class="ressi soft">
      <ul>
        <li id="self">Self-growth</li>
        <li id="mind">Mindfulness</li>
        <li id="fit">Fitntess &amp; Health</li>
        <li id="storia"><span class="history">Storia e Antropologia</span></li>
        <li id="book">Lettura</li>
        <li id="eco">Ambiente</li>
      </ul>
    </div>
  </div>
  </div>

  <footer id="chiamami">
    <div class="foot"></div>
    <div class="foot contact"><a href="mailto:ale.baccelli@libero.it" target="_blank">E-mail</a><span class="not"><br></span><span class="bracket"> &nbsp; |&nbsp; </span><a
        href="https://www.linkedin.com/in/alessandro-baccelli1996/" target="_blank">Linkedin</a><span class="not"><br></span><span class="bracket"> &nbsp;|&nbsp; </span><a
        href="https://talent.start2impact.it/home/student_index" target="_blank">Start2impact</a><br>
      <br> ALESSANDRO BACCELLI 2020 &#169;</div>
    <div class="foot"></div>
  </footer>
</body>

</html>


巴切角
☰

亚历山德罗·巴切利

进行中的WEB开发人员
齐索诺
24安尼的吉诺维塞大学是一所充满激情的大学
数字技术

何以最近的scoperto
每一个节目的激情之歌《我的歌》，
通过Html，通过discorrendo，使用CSS和e


根据未来信托基金的规定，联合国的未来将是什么样的
伦戈·珀科索
技能
硬技能

英格尔斯弗伦特酒店
HTML
CSS
坎瓦

软技能

自治
快速学习者
恩帕蒂亚
阿斯科托阿提沃酒店

兴趣

编码
Fotografia digital
格拉菲卡
Scoprire noove cose
cucina
视频游戏


自我成长
正念
Fitness&；健康
上颌窦畸形
莱图拉
环境


|
|


亚历山德罗·巴切利2020年和169年；

CSS

*{
保证金：0；
填充：0；
框大小：边框框；
}
身体{
字体系列：“Segoe UI”，塔荷马，日内瓦，Verdana，无衬线；
字体大小：16px；
背景色：#E5DDC8；
颜色：#1F；
}
/*宽度*/
：-webkit滚动条{
宽度：10px；
}
/*跟踪*/
：-webkit滚动条轨迹{
背景：#EBFDFF；
}
/*处理*/
：-webkit滚动条拇指{
背景：#B1C5E7；
}
/*悬停手柄*/
：-webkit滚动条拇指：悬停{
背景：#7699D4；
}
h1，
氢{
字体系列：“蒙特塞拉特”、“Helvetica”、“Arial”、无衬线；
颜色：#141414；
}
导航{
文本对齐：右对齐；
字体大小：120%；
高度：100px；
线高：100px；
z指数：99999；
位置：相对位置；
背景色：#004369；
}
.菜单{
利润率：0.30px 0.0；
z指数：10；
背景色：#004369；
}
.菜单a{
清楚:对,；
文字装饰：无；
颜色：白色；
利润率：0.10px；
线高：100px；
z指数：10；
}
.菜单a：悬停{
文字装饰：下划线；
}
.联系人菜单{
颜色：7EDD9A；
z指数：10；
}
标签{
利润率：0.40px 0.0；
字号：26px；
线高：100px；
显示：无；
宽度：26px；
浮动：对；
z指数：10；
颜色：白色；
}
#拨动{
显示：无；
}
@仅介质屏幕和（最大宽度：600px）{
标签{
显示：块；
光标：指针；
z指数：10；
}
.菜单{
文本对齐：居中；
宽度：100%；
显示：无；
z指数：9999；
}
.菜单a{
显示：块；
边框底部：1px实心#eaeb；
保证金：0；
z指数：10；
}
.菜单a：悬停{
文字装饰：无；
}
#切换：选中+菜单{
显示：块；
}
}
梅因先生{
显示：块；
z指数：-1；
位置：相对位置；
}
.欢迎{
显示：无；
颜色：#FFFFFF；
字号：3em；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
文本对齐：居中；
文本阴影：2PX2PX2PX#1F；
}
.欢迎您{
空白：nowrap；
颜色：#ffffff；
}
.主img{
宽度：100%；
位置：相对位置；
}
.分开{
高度：900px；
边缘顶部：120px；
}
.标题{
字体系列：“蒙特塞拉特”，
“Helvetica”，
“Arial”，
无衬线；
颜色：#141414；
字体大小：200%；
边缘底部：80px；
文本对齐：居中；
单词包装：打断单词；
}
.首先{
高度：适合的内容；
}
.第1节{
显示器：flex；
证明内容：中心；
宽度：958px；
保证金：0自动；
}
.个人资料{
文本对齐：居中；
}
.传记{
自对准：居中；
字体大小：140%；
左边距：80px；
}
.传记a{
颜色：#01949A；
文字装饰：无；
}
.传记a：悬停{
颜色：#004369；
文字装饰：下划线；
}
.下载{
显示器：flex；
证明内容：中心；
保证金：0自动；
}
.传记按钮{
字体大小：130%；
填充：15px；
背景色：#01949A；
边界半径：10px；
边界：无；
边缘顶端：40px；
}
.传记按钮a{
颜色：#ffffff；
文字装饰：无；
}
.按钮a：悬停{
颜色：#ffffff；
文字装饰：无；
背景色：#004369；
}
.按钮：悬停{
背景色：#004369；
}
.第2节{
显示器：flex；
保证金：0自动；
对正内容：空间均匀；
字体大小：200%；
}
.颜色不同{
背景色：#E5F9E0；
填充顶部：120px；
}
.保证金{
边缘底部：145px；
}
.硬h2，
.软h2{
边缘底部：25px；
}
.第2节{
列表样式类型：无；
玛格