html - 网站在 Windows 和 Mac 上的定位元素不同

问题描述

我一直在我的 Mac 上开发个人作品集网站，但不幸的是，它在 Windows 操作系统上运行的任何浏览器上都无法正确呈现。它可以在移动设备和 MacOS 上按预期工作。该网站是aaronalberg.com。在 Windows 上，“项目”下的卡片和页脚都重叠在侧边栏上。此外，当侧边栏更改为标题时，当窗口变为大约 800 像素或更小时，#leftheader 和 #rightheader 部分会堆叠（因此不会显示右标题），尽管它们的总宽度均为 50vw（应该像在 Mac 上一样加起来 100）。

我曾尝试使用一个不起作用的 CSS 擦除模板，并且我为适应 Windows 差异而进行的任何特定像素或视口更改都会弄乱其他操作系统上的布局。一些希望相关的 html/css 如下

任何帮助深表感谢。谢谢！

:root {
    --main-theme: #5AF;
    --sidenav-length: 250px;
}
* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    background-color: white;
    width: 100%;
    position: relative;
    font-family:  sans-serif;
    text-align: center;
    margin: 0;
    padding-bottom: 10vh;
    overflow-x: hidden;
}
header {
    padding-top: 5px;
    display: none;
    background-color: var(--main-theme);
    color: white;
    height: 150px;

}

#headertext {

    text-align: left;
    padding-right: 2%;
    padding-left: 2%;
    font-size: 3em;
}

#leftheader {
    float: left;
    margin-left: 1vw;
    margin-top: 2vh;
    width: 49vw;

}
#rightheader {
    font-size: 1.2em;
    float: left;
    text-align: center;
    width: 50vw;
    margin-top: 5vh;

}
#rightheader p {
    display: inline;
}

#rightheader div {

    padding-bottom: 5%;
}

header i {
    color: white;
    display: inline;
    font-size: 1.5em;
}
/* side nav */

.sidenav {
  height: 100%;
  width: var(--sidenav-length);
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  background-color: var(--main-theme);
  overflow-x: hidden;
  padding-top: 20px;
  color: white;
}

.sidenav a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 25px;
  color: white;
  display: block;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav i {
    display: inherit;
}


#wrapper {
    width: 100%;
    margin: 0;
    text-align: center;
    padding-bottom: 100px;

}
#outerwrapper {
    margin:0;
    width: calc(100vw - var(--sidenav-length));
    position: absolute;
    z-index: 2;
    right:0;
}
/* project chunks */


.projectcard {
    background-color: #e8e8e8;
    padding: 1%;
    padding-top: 2%;
    height: 220px;

}
.projectcard:nth-child(2n) {
    background-color: #d8d8d8;
}
.projectpic {
    clear: both;
    width: 180px;
    margin-right: 2%;
    float: left;
    margin-left: 5px;
}
.projecttitle {
    text-align: left;
}
#projectlabel {
    margin-left: 50px;
}
.projecttext {
    text-align: left;

}

.projecttext a {
    color: blue;
    text-decoration: none;

}
#projects {
    padding-bottom: 50px;

}

<body>

        <header>
            <div id="leftheader">
                <h1 id="headertext">Aaron Alberg</h1>
                <p>Engineer. Leader. Innovator.</p>
            </div>
            <div id="rightheader">
                <div>

                </div>
                <div style="line-height: 1.4;">
                    <span class="icon">
                    <i style="display: inline;" class="fas fa-map-marker-alt"></i>
                </span>
                <p> Chicago, IL & Champaign, IL</p>
                </div>

            </div>



        </header>


<div class="sidenav">

    <img src="files/profilepic.jpg" alt="profile picture" class="profile">
    <h1>Aaron Alberg</h1>
    <p>Engineer. Leader. Innovator.</p>
    <i class="fas fa-map-marker-alt"></i>
    <p>Chicago, IL</p>
    <p>Champaign, IL</p>

</div>

   <div id="outerwrapper">

        <div id="wrapper" class="center">

            <div id="bio">
                <h2>Hello!</h2>
                <p class="profiletext">My name is Aaron Alberg. I'm currently studying <b class="blue">computer science</b> at the University of Illinois at Urbana-Champaign. I'm passionate about applying <b class="blue">human-centered design principles</b> to projects ranging from software development to community outreach. I believe the key to engineering the best solutions is a <b class="blue">deep understanding of user needs</b>. Take a look at <a href="files/Resume.pdf" target="_blank" class="resume-link">my resume.</a></p>

            </div>
            <h2 id="projectlabel">Projects</h2>
            <div id="projects">

                <div class="projectcard">
                    <img src="files/UPDmural.png" alt="UPD mural" class="projectpic">
                    <h3 class="projecttitle">Urbana Park District <span class="inprogress">(in progress)</span></h3>
                    <p class="projecttext">As a part of UIUC's chapter of Design for America, my team is collaborating with the Urbana Park District to fine tune the implementation of UPD's new Strategic Plan. Specifically, we are working to find ways to promote a culture of diversity and inclusion that the staff are accountable for creating and upholding. </p>
                    <a href="UPDproject.html" class="button">Read More</a>
                </div>
                <div class="projectcard">
                    <img src="files/websitepic.png" alt="picture of website" class="projectpic">
                    <h3 class="projecttitle">This Website  <span class="inprogress">(in progress)</span></h3>
                    <p class="projecttext">Since doing a project is way more fun than following an online tutorial, I've used the development of this website to teach myself HTML/CSS. I also work to ensure that the site is scalable for future editing, accessible, and functions on all screen sizes. When I come across a feauture I like, I learn how to use it by implementing it here.</p>
                    <a href="Websiteproject.html" class="button">Read More</a>
                </div>


            </div>
            <div id="inprogress">

                <p class="center">**This website is very much a work in progress and is currently experiencing rendering issues specifically on Windows OS. Stay tuned!**</p>

            </div>

        </div>

       <footer>
            <p class="center foottext">
                <a href="mailto:aaronjalberg@gmail.com"><i class="fas fa-envelope"></i> <span class="nearicon">aaronjalberg@gmail.com</span> </a> <span class="pipe">|</span> 
                <a href="https://www.linkedin.com/in/aaron-alberg" target="_blank" ><i class="fab fa-linkedin"></i>  <span class="nearicon">linkedin.com/in/aaron-alberg</span>  </a><span class="pipe">|</span> 
                <a href="https://github.com/aaronalberg" target="_blank"><i class="fab fa-github"></i>  <span class="nearicon">github.com/aaronalberg</span></a>
            </p>
            <p class="center">© Aaron Alberg 2019</p>
        </footer>

       </div>

    </body>

标签： htmlcsswindowswebcss-position

html - 网站在 Windows 和 Mac 上的定位元素不同

问题描述

解决方案

推荐阅读