个人中心
gpt4 book ai didi

css - Internet Explorer/Safari Flexbox(?) 和对齐问题

转载 作者：太空宇宙 更新时间：2023-11-04 08:58:05 24 4
gpt4 key购买 nike

我在 IE 和 Safari 中的元素对齐方面遇到了一些问题，而且我在跨浏览器兼容性方面不是很好，所以如果有人可以建议我在以下方面做错了什么或者可能是什么，我将不胜感激良好的一般修复。

代码笔:http://codepen.io/nickwcook/pen/vxjavM?editors=0110 .

编辑:主页图像对齐排序，但仍然存在以下问题:

页面关于部分中的文本在其他浏览器中没有问题，但在 IE 中它没有考虑父级的水平填充 (30px)，实际上溢出了视口(viewport)的两侧。

HTML:

<body ng-app="portfolioApp" data-spy="scroll" data-target="#navbar">

    <div id="borderTop"></div>

     <div id="borderRight"></div>

    <div id="borderBottom"></div>

    <div id="borderLeft"></div>

    <div id="logo">

        <a href="#"></a>

        <img src="img/logo-basic-dark.png" alt="Logo">

     </div>

     <div class="container-fluid">

        <nav class="navbar navbar-default navbar-fixed-top">

            <div class="navbar-header">

                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">

                    <span class="icon-bar"></span>

                    <span class="icon-bar"></span>

                    <span class="icon-bar"></span>                        

                </button>

            </div>

            <div class="collapse navbar-collapse" id="navbar">

                <ul class="nav navbar-nav pull-right">

                    <li class="navLink"><a href="#home" alt="Home Button">Home</a></li>

                    <li class="navLink"><a href="#about" alt="About Button">About</a></li>

                    <li class="navLink"><a href="#work" alt="Work Button">Work</a></li>

                    <li class="navLink"><a href="#contact" alt="Contact Button">Contact</a></li>

                </ul>

            </div>

        </nav>

    </div>

    <main>

        <section id="home">

            <div class="sectionContent">

                <div id="homeText">

                    <h1 id="homePrimary">Home Text Primary</h1>

                    <h2 id="homeSecondary">Home Text Secondary</h2>

                </div>

                <div id="homeImageContainer">

                    <div id="homeImage" class="blend-red-blue">

                        <div id="homeImageMask"></div>

                    </div>

                </div>

            </div>

        </section>

        <section id="about" ng-controller="skillsController">

            <div class="sectionContent">

                <div class="row">

                    <div class="col-xs-12 col-md-8 col-md-push-2">

                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                        <div id="skillsList">

                           <p>My skills include:</p>

                            <p ng-repeat="skill in skills" class="skillItem">{{skill.name}}</p>

                        </div>

                    </div>

                </div>

            </div>

        </section>

        <section id="work" ng-controller="projectsController">

            <div class="sectionContent">

                <div class="row">

                    <div class="project col-xs-12 col-md-6 col-lg-3">

                        <div>

                            <h2>Project One</h2>

                            <h4>Project Description</h4>

                            <a ng-href="#" target="blank_">View Project</a>

                        </div>

                    </div>

                  <div class="project col-xs-12 col-md-6 col-lg-3">

                        <div>

                            <h2>Project One</h2>

                            <h4>Project Description</h4>

                            <a ng-href="#" target="blank_">View Project</a>

                        </div>

                    </div>

                  <div class="project col-xs-12 col-md-6 col-lg-3">

                        <div>

                            <h2>Project One</h2>

                            <h4>Project Description</h4>

                            <a ng-href="#" target="blank_">View Project</a>

                        </div>

                    </div>

                  <div class="project col-xs-12 col-md-6 col-lg-3">

                        <div>

                            <h2>Project One</h2>

                            <h4>Project Description</h4>

                            <a ng-href="#" target="blank_">View Project</a>

                        </div>

                    </div>

                </div>

            </div>

        </section>

        <section id="contact">

            <div class="sectionContent">



            </div>

        </section>

    </main>

</body>

CSS:

/* GENERAL LAYOUT */

html, body 
{
padding: 0;
margin: 0;
background-color: #fefefe;
overflow-x: hidden;
}

/* SECTIONS */

section
{
display: block;
margin: 0;
background: transparent;
z-index: 90;
}

.sectionContent
{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 100px 30px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}


/* HOME SECTION */

#home #homeImageContainer
{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}

#home #homeImage
{
position: absolute;
height: 30vw;
width: 30vw;
background-image: url('../img/laptop-hands.png');
background-position: center center;
background-size: cover;
z-index: 90;
-webkit-box-shadow: 3px 3px 100px 4px rgba(153,153,153,1);
-moz-box-shadow: 3px 3px 100px 4px rgba(153,153,153,1);
box-shadow: 3px 3px 100px 4px rgba(153,153,153,1);
}

#home #homeImage > #homeImageMask
{
height: 100%;
width: 100%;
background-color: rgba(84, 17, 200, 0.6);
z-index: 91;
}

#home #homeText
{
z-index: 95;
}

#homeText h1#homePrimary,
#homeText h2#homeSecondary
{
color: #000;
text-align: center;
}

#homeText h1#homePrimary
{
font-size: 30px;
font-weight: 600;
margin-bottom: 10px;
}

#homeText h2#homeSecondary
{
font-family: 'Open Sans', sans-serif;
font-size: 16px;
font-weight: 600;
}


/* ABOUT SECTION */

#about p
{
line-height: 26px;
text-align: center;
}

#about #skillsList
{
width: 100%;
text-align: center;
margin-top: 50px;
}

#about #skillsList p:first-of-type
{
margin-bottom: 10px;
}

#about #skillsList p.skillItem
{
display: inline;
margin: 0 15px;
}

最佳答案

像这样简化怎么样:

body, h1, h2 {
  margin: 0;
}

.box-content {
  width: 30vw;
  height: 30vw;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 100px 30px;
  box-sizing: border-box;
  background: rgba(84, 17, 200, 0.6);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  box-shadow: 3px 3px 100px 4px rgba(153, 153, 153, 1);
  text-align: center;
}
<div class="sectionContent">
  <div id="homeText" class="box-content">
    <h1 id="homePrimary">Home Text Primary</h1>
    <h2 id="homeSecondary">Home Text Secondary</h2>
  </div>
</div>

关于css - Internet Explorer/Safari Flexbox(?) 和对齐问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42974143/

24 4 0
文章推荐： python - 如何在字符串中包含\作为正则表达式 python 的模式
文章推荐： python - 为什么这个异常不打印 0？
文章推荐： c - 停止 fscanf？
文章推荐： css - 媒体断点不适用于 wordpress
太空宇宙
个人简介

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

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