身高:100%不在safari工作
我有一个孩子div垂直居中父母div {父div有一定的高度}。我已经给儿童div分配了高度:100%,但它并没有仅在safari上使用此属性。这里是关于这个问题的截图。 Safari bug身高:100%不在safari工作
一切工作正常在铬和莫兹,但野生动物园。这里是网站的实时版本。 http://www.ravnapp.com/
任何帮助将不胜感激,谢谢!
更新:这里是相关的html代码。
<div class="uk-width-medium-1-2 uk-width-small-1-2 uk-width-large-1-2">
<div class="action-image uk-position-relative">
<div class="uk-cover-background">
<img src="img/action1.png" width="100%" height="" alt="">
</div>
</div>
</div>
<div class="uk-width-medium-1-2 uk-width-small-1-2 uk-width-large-1-2 action-text uk-vertical-align">
<div class="uk-vertical-align-middle">
<h1 class="avenirlight">TOTAL PRIVACY <br><span class="avenirmedium">AND CONTROL</span></h1>
<p class="desp blenderbook">Ravn is yours to use as you like. Everything is safe and secure and even your notifications are fully disguised. Your privacy is our priority.</p>
</div>
</div>
<div class="uk-width-medium-1-2 uk-width-small-1-2 uk-width-large-1-2 action-text uk-vertical-align">
<div class="uk-vertical-align-middle">
<h1 class="avenirlight">EXHALE, <br><span class="avenirmedium">FINALLY</span></h1>
<p class="desp blenderbook">Ravn is 100% discreet. All your activity is stored within Ravn so you won’t have any surprises popping up in your chat history or camera roll. We’ve got your back.</p>
</div>
</div>
<div class="uk-width-medium-1-2 uk-width-small-1-2 uk-width-large-1-2">
<div class="action-image uk-position-relative">
<div class="uk-cover-background">
<img src="img/action2.png" width="100%" height="" alt="">
</div>
</div>
</div>
它看起来像容器div实际上没有设置他们的高度,他们需要有一个高度之前,内容可以垂直居中。因为您要全屏并将宽度设置为50%并希望高度匹配。只需向每个容器添加
height: 50vw;
。这会将高度设置为视口宽度的一半,该宽度将与给定当前设置的框的宽度相匹配。
你将不得不调整你的图像实际上是正方形,因为它们只有几个像素。
谢谢你的回应,但是如果我误导你或者你弄错了,我很害怕。请检查标题为“safari bug”的截图,并更新针对我所面临问题的html代码。 – user6002434
我误解了你的问题..我已经编辑了相关解决方案的答案。 – TinMonkey
它有助于将您的代码包含在您的问题中。请[编辑]包括相关的HTML等... – FishStix
谢谢你的建议,HTML添加! – user6002434
你也必须给我们CSS ... – the12