2013-12-17 21 views
0

我有一個簡單的一個頁面靜態網站與引導容器div包裝其他四個div。部門不對齊只有IE瀏覽器

「intro-box」類元素應居中。它完全集中在Firefox和Chrome中。然而IE11將它定位在容器div的最左邊。我已經包含了html和css。任何幫助非常感謝。

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title><%= content_for?(:title) ? yield(:title) : "my_title" %></title> 
<meta name="description" content="<%= content_for?(:description) ? yield(:description) : "my_description" %>"> 

<%= stylesheet_link_tag "application", :media => "all" %> 
<%= favicon_link_tag "/favicon.ico" %> 
<%= csrf_meta_tags %> 
<%= yield(:head) %> 
</head> 
<body class="<%= controller_name %> <%= action_name %>"> 
<div class="background"> 
<%=image_tag("bkgrnd.jpg", :class=>"background-img")%> 
</div> 
    <div class="container"> 
    <div class="center-div"> 
<div class="social"> 
    some social networking stuff 
    <div class="email-capture"> 
    some fields to capture users emails 
    </div> 
    <p class="intro-box"> some introductory stuff </p> 
    </div> 
    <div class="opaque-block"> some stuff</div> 
    </div>  
    </div> 

CSS

.intro-box{ 
    left: 0; right: 0; 
    position:absolute; 
    top:185px; 
    display:block; 
    margin:auto; 
    font-family: "abeatbyKai", sans-serif; 
    color:#000; 
    max-width:180px; 
height:90px; 
    padding:10px; 
} 
+1

你試過去掉位置:絕對和左:0,右:0?它應該沒有這些中心。 – JanR

+0

不能相信這是簡單的,但它的工作。我必須把它的立場設定爲相對的。不知道爲什麼它會在鉻和Firefox,但無論如何感謝。如果您將答案作爲答案提交,請將其標記爲正確。 – Renegade

回答

0

刪除左邊:0,右邊:0 並將位置設置爲相對於絕對。

0

除了去除左,右和絕對位置由JanR說,增加利潤率爲

margin: 0 auto; 

,如果你不需要頂部,底部邊距,並使其在瀏覽器中統一,因爲您已經指定了max-w IDþ保證金將自動將其調整到中心,或IE瀏覽器,你可以只是刪除

position: absolute 

我試了一下它的工作

0

嘗試......你可能需要調整的185px保證金,以滿足您需要。

.intro-box{ 
    margin:185px auto 0 auto; 
    display:block; 
    margin:0 auto; 
    font-family: "abeatbyKai", sans-serif; 
    color:#000; 
    max-width:180px; 
    height:90px; 
    padding:10px; 
}