居中的div不能在IE8中工作

我做了tumblr主題，它在Chrome中完美工作，但是當我把IE對齊時（當鼠標懸停在圖像上和打開圖像後（永久鏈接頁面））被搞亂了。 IE [在此輸入鏈接描述] [1]移動eberything也是正確的。我幾乎嘗試了一切，但它仍然沒有工作...居中的div不能在IE8中工作

這裏是tumblr頁：

http://nolnspiration.tumblr.com/

這裏是代碼：

<!DOCTYPE html> 

<head> 

<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 

<title>{Title}</title> 

<meta name="description" content="{block:IndexPage}{block:Description}{MetaDescription}{/block:Description}{/block:IndexPage}{block:PermalinkPage}{block:PostSummary}{PostSummary}{/block:PostSummary}{/block:PermalinkPage}" /> 

<link rel="shortcut icon" href="{Favicon}" /> 
<link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}" /> 

<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script> 

<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" /> 


<!-- Icon Awesome --> 
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> 

<!-- jQuery --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> 

<script src="http://masonry.desandro.com/masonry.pkgd.min.js" type="text/javascript"></script> 

<script src="https://raw.github.com/desandro/imagesloaded/master/jquery.imagesloaded.min.js" type="text/javascript"></script> 
<script src="http://masonry.desandro.com/js/jquery.infinitescroll.min.js" type="text/javascript"></script> 


<!--MENU SLIDE --> 
<script type="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script> 

<style type="text/css"> 
/*RESET*/  
/* http://meyerweb.com/eric/tools/css/reset/ 
    v2.0 | 20110126 
    License: none (public domain) 
*/ 

html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
b, u, i, center, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, 
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, 
time, mark, audio, video { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-size: 100%; 
    font: inherit; 
    vertical-align: baseline; 
} 
/* HTML5 display-role reset for older browsers */ 
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { 
    display: block; 
} 
body { 
    line-height: 1; 
} 
ol, ul { 
    list-style: none; 
} 
blockquote, q { 
    quotes: none; 
} 
blockquote:before, blockquote:after, 
q:before, q:after { 
    content: ''; 
    content: none; 
} 
table { 
    border-collapse: collapse; 
    border-spacing: 0; 
} 


body { 
    background-color: #FFFFFF; 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 10pt; 
    vertical-align: baseline; 
    color: #3e4347; 
    } 
a:link {color:#349bc8;}  /* unvisited link */ 
a:visited {color:#349bc8;} /* visited link */ 
a:hover {color:#349bc8;} /* mouse over link */ 
a:active {color:#349bc8;} /* selected link */ 

a { 
    text-decoration: none; 
    outline: none; 
} 

a img { 
    border: none; 
} 

#entirety { 
    margin: 0 auto; 
    width: 100%; } 
#menu{ 
    position:relative; 
    width:100% !important; 
    height: 340px; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-transition: height 0.4s ease-in-out; 
    -moz-transition: height 0.4s ease-in-out; 
    -ms-transition: height 0.4s ease-in-out; 
    -o-transition: height 0.4s ease-in-out; 
    transition: height 0.4s ease-in-out; 
    } 
#headerBg{ 
    position: absolute; 
    z-index: 1; 
    width:100%; 
    height: 300px; 
    background-image:url("http://static.tumblr.com/2e5jfgm/ngMn1jpzk/bacground__1_.png"); 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat; 

} 
#whiteMask{ 
    width:40%; 
    float: right; 
    height:300px; 
    background-color: white; 

} 
.menuStripe{ 
    position: absolute; 
    z-index: 0; 
    top: 90px; 
    width: 100%; 
    height: 250px; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-transition: top 0.4s ease-in-out; 
    -moz-transition: top 0.4s ease-in-out; 
    -ms-transition: top 0.4s ease-in-out; 
    -o-transition: top 0.4s ease-in-out; 
    transition: top 0.4s ease-in-out; 
    background-color: #141d1d; 
} 
.menuContentContainer{ 
    height: 210px; 
    width: 100%; 
    display: block; 
    position:relative; 
} 
.menuContentContainer ul{ 
    float: left; 
    padding: 12px 10px 10px 50px; 
    color: white; 
    list-style-type:square; 
} 
.menuContentContainer ul li{ 
    padding: 8px 0px 0px 0px; 
    list-style-type:square; 
} 
.menuContentContainer ul li a{ 
    font-family: SourceSansProRegular; 
    font-size: 11pt; 
    -webkit-font-smoothing: antialiased !important; 
    list-style-type:square; 
    color: white; 
} 
.menuContentContainer ul li a:hover {opacity: 0.8} /* mouse over link */ 

.Description{ 
    font-family: SourceSansProLight; 
    font-size: 11pt; 
    line-height: 14pt; 
    color: white; 
    opacity: 0.7; 
    width: 50%; 
    float: right; 
} 

.menuButton{ 
    position:relative; 
    float: left; 
    cursor: pointer; 
    cursor: hand; 
} 
.menuButton i{ 
    padding: 10px 10px 10px 10px; 
    color: white; 
    font-size: 14pt; 
} 

#container{ 
    vertical-align: center; 
    position: relative; 
    padding: 10px; 
    } 
.blogtitle, .blogtitle a { 
    font-size: 20pt; 
    color: #d7ceb2; 
    text-shadow: 3px 3px 0px #2c2e38, 5px 5px 0px #5c5f72; 
    text-align: center; 
    text-transform: uppercase; 
    letter-spacing: 10px; } 

.post{ 
    float: left; 
    display: block; 
    margin: 10px; 
    overflow: hidden; 
    position: relative; 
    -webkit-border-radius: 2px; 
    -moz-border-radius: 2px; 
    border-radius: 2px; 
} 


.pic{ 
    overflow: hidden; 
    float: left; 
    width: 300px; 
    } 


.photoset{ 
    float: left; 
    width: 300px; } 
.vid{ 
    float: left; 
    padding: 0px; 
    width: 400px; } 
.text{ 
    float: left; 
    width: 300px; } 
.audio{ 
    float: left; 
    width: 300px; } 
.post img { 
    max-width: 300px; 
    } 
#caption{ 
    display: inline-block; 
    position: relative; 
    margin: 20px; 
    } 
#bottomnav{ 
    width: 100%; 
    line-height:19px; 
    margin: 10px 0px 20px 10px; 
    display: table-cell; 
    vertical-align: middle; 
    } 
#bottomnav a{ 
    color: white; 
    text-decoration: none; 
    } 
#Arrow 
{ 
    float: left; 
    font-size: 14px; 
    font-weight:bold; 
    vertical-align: middle; 
    display: inline-block; 
    opacity: 0.5; 
    vertical-align: middle; 
    background-color: #9e9e9e; 
    width: 100px; 
    height: 22px; 
    padding:10px 10px 5px 10px; 
    margin:0px 0px 20px 0px; 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    border-radius: 4px; 

} 
#Arrow:hover 
{ 
    opacity: 0.6; 
} 

#page_count{ 
    color: #3e4347; 
    float: left; 
    display:inline-block; 
    vertical-align: middle;  
    line-height:19px; 
    font-weight: bold; 
    font-family: Arial; 
    font-size: 14px; 
    padding:10px 20px 5px 20px; 
} 


.caption-4 { 
    overflow: hidden; 
    background: rgba(0,0,0,0.2); 
    -webkit-transition: background 0.3s ease-in-out; 
    -moz-transition: background 0.3s ease-in-out; 
    transition: background 0.3s ease-in-out; 
} 

.caption-4:hover { 
    background: rgba(0,0,0,0); 
} 

.caption-4 img { 
    -webkit-transition: -webkit-transform 0.3s ease-in-out; 
    -moz-transition: -moz-transform 0.3s ease-in-out; 
    transition: transform 0.3s ease-in-out; 
} 

.caption-4:hover img { 
    -webkit-transform: translateX(0%); 
    -moz-transform: translateX(0%); 
    transform: translateX(0%); 
} 

.PostCaption { 
    overflow: hidden; 
    width: 300px; 
    height: 100%; 
    z-index: 1; 
    position: absolute; 
    background: #000000; 
    opacity: 0.9; 
    -webkit-transform: translateX(-100%); 
    -moz-transform: translateX(-100%); 
    transform: translateX(-100%); 
    -webkit-transition: -webkit-transform 0.3s ease-in-out; 
    -moz-transition: -moz-transform 0.3s ease-in-out; 
    transition: transform 0.3s ease-in-out; 
     -webkit-border-radius: 2px; 
    -moz-border-radius: 2px; 
    border-radius: 2px; 
} 


.pic:hover .PostCaption{ 
    -webkit-transform: translateX(0%); 
    -moz-transform: translateX(0%); 
    transform: translateX(0%); 
} 
.tableAlign{ 
    height:100%; 
    width:100%; 
    display:table; 
} 

.LikeReblogButton{ 
    webkit-transform: translateX(50%); 
    -moz-transform: translateX(50%); 
    transform: translateX(50%); 
    vertical-align:middle; 
    width: 300px; 
    height:100%; 
    display:table-cell; 
} 
.innerButtonsContainer{ 
    display: table; 
    margin: 0 auto; 
} 
.singlebutton{ 
    float:left; 
    margin: 10px 20px 10px 20px; 
} 
.FullSize{ 
    color: #cccccc; 
    width:100; 
    opacity: 0.5; 
    margin: 0px 0px 20px 0px; 
    text-align: center; 
} 
.FullSize a:link {color:#cccccc;}  /* unvisited link */ 
.FullSize a:visited {color:#cccccc;} /* visited link */ 
.FullSize a:hover {color:#cccccc;} /* mouse over link */ 
.FullSize a:active {color:#cccccc;} /* selected link */ 

.ReblogCounts 
{ 
    color: #cccccc; 
    width:100%; 
    text-align: center; 
    font-family: Arial; 
    font-size: 18pt; 
} 
@font-face 
{ 
    font-family: CodeFont; 
    src: url(http://static.tumblr.com/2e5jfgm/hUPn1lp5t/code_bold.otf); 
} 

@font-face 
{ 
    font-family: SourceSansProRegular; 
    src: url(http://static.tumblr.com/2e5jfgm/ww1n1nn1x/sourcesanspro-regular.otf); 
} 
@font-face 
{ 
    font-family: SourceSansProLight; 
    src: url(http://static.tumblr.com/2e5jfgm/oIAn1np9n/sourcesanspro-light.otf); 
    -webkit-font-smoothing: always; 
    font-weight: normal; 
    font-style: normal; 
} 

.permaimage{ 
    width: 100% 
    margin: 0 auto; 
    float:center; 
    text-align: center; 
    webkit-transform: translateX(50%); 
    -moz-transform: translateX(50%); 
    transform: translateX(50%); 
} 
.permaimage img{ 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    border-radius: 4px; 
} 
.PermalinkinnerButtonsContainer{ 
    display: table; 
    padding: 10px 0px 0px 0px; 
    margin: 0 auto; 
} 
.PermalinkReblogCounts 
{ 
    color: #cccccc; 
    float:left; 
    margin: 12px 20px 10px 20px; 
    text-align: left; 
    font-family: Arial; 
    font-size: 12pt; 
} 



{CustomCSS} 

</style> 

</head> 


<body> 

<div id="entirety"> 
<div id="menu"> 
    <div id="headerBg"> 
     <div id="whiteMask"></div> 
    </div> 
    <div class="menuStripe"> 
     <div class="menuContentContainer"> 
      <ul> 
       <li><a href="{BlogURL}">HOME</a></li> 
       <li><a href="{BlogURL}tagged/technology">Technology</a></li> 
       <li><a href="{BlogURL}tagged/menswear">Menswear</a></li> 
       <li><a href="{BlogURL}tagged/archytecture">Archytecture</a></li> 
       <li><a href="{BlogURL}tagged/interiour">Interiour design</a></li> 
       <li><a href="{BlogURL}tagged/inspirative">Inspirative</a></li> 
       <li><a href="{BlogURL}tagged/girls">Girls</a></li> 
       <li><a href="{BlogURL}tagged/cars">Cars</a></li> 

      </ul> 
      <div class="Description">{description}</div> 
     </div> 
     <div class="menuButton"> 
      <i class="fa fa-align-justify fa-fw"></i> 
     </div> 
    </div> 
</div><!--END menu --> 

<div id="container"> 

{block:Posts}  



{block:Text} 
<div class="post text"> 
{block:Title}<span class="title">{Title}</span>{/block:Title} 
{Body} 
</div><!--post--> 
{/block:Text} 

{block:Photo} 
{block:IndexPage} 
<div class="post pic"> 

    <div class="PostCaption"> 
     <div class="tableAlign"> 
     <div class="LikeReblogButton"> 
      <div class="innerButtonsContainer"> 
       <div class="FullSize"> 
        <a href="{permalink}" id="single_image" > 
         <i class="fa fa-arrows-alt fa-5x"></i> 
        </a> 
       </div> 
       <div class="singlebutton"> 
        {LikeButton size="40"} 
       </div> 
       <div class="singlebutton"> 
        {ReblogButton size="40"} 
       </div> 
      </div> 
      <div class="ReblogCounts"> 
       {NoteCount} 
      </div> 
     </div> 
     </div> 
    </div> 
    <img src="{PhotoURL-400}" alt="Illustration of Viking"> 
{/block:IndexPage} 
{block:PermalinkPage} 
    <center> 
    <div class="permaimage"> 
     <img src="{PhotoURL-400}" alt="Illustration of Viking"> 
    </div> 
    <div class="LikeReblogButton"> 
     <div class="PermalinkinnerButtonsContainer"> 
      <div class="singlebutton"> 
       {LikeButton size="20"} 
      </div> 
      <div class="singlebutton"> 
       {ReblogButton size="20"} 
      </div> 
      <div class="PermalinkReblogCounts"> 
       {NoteCountWithLabel} 
      </div> 
     </div> 
    </div> 
    </center> 
{/block:PermalinkPage} 
</div> 
<!--post--> 
{/block:Photo} 

{block:Photoset} 
<div class="post photoset"> 
<center>{Photoset-400}</center> 
<div id="caption"> 
{block:Caption}{Caption}{/block:Caption} 
</div><!--END caption--> 
</div><!--post--> 
{/block:Photoset} 

{block:Quote} 
<div class="post text"> 
<span class="quote">&ldquo;{Quote}&rdquo;</span> 
{block:Source}{Source}{/block:Source} 
</div><!--post--> 
{/block:Quote} 

{block:Link} 
<div class="post text"> 
<a title="" href="{URL}" class="postlink" {Target}>{Name}</a> 
{block:Description}{Description}{/block:Description} 
</div><!--post--> 
{/block:Link} 

{block:Audio} 
<div class="post audio"> 
{AudioPlayerGrey} 
{block:Caption}{Caption}{/block:Caption} 
</div><!--post--> 
{/block:Audio} 

{block:Chat} 
<div class="post text"> 
{block:Title}<span class="title">{Title}</span>{/block:Title} 
<ul class="chat"> 
    {block:Lines} 
     <li> 
      {block:Label}<span class="label">{Label}</span>{/block:Label}{Line} 
     </li> 
    {/block:Lines}    
</ul> 
</div><!--post--> 
{/block:Chat} 

{block:Video} 
<div class="post vid"> 
<center>{Video-400}</center> 
<div id="caption"> 
{block:Caption}{Caption}{/block:Caption} 
</div><!--END caption--> 
</div><!--post--> 
{/block:Video} 

{block:Answer} 
<div class="post text"> 
<b>{Asker} asked:</b> {Question} 
<p>{Answer} 
</div><!--post--> 
{/block:Answer} 

{/block:Posts} 


</div><!--END container--> 

<br/> 

{block:IndexPage} 
<center> 
<div id="bottomnav"> 
    {block:PreviousPage} 
     <a href="{PreviousPage}"><div id="Arrow"><i class="fa fa-arrow-left"></i>&nbsp;&nbsp;NEWER</div></a> 
    {/block:PreviousPage} 

    <div id="page_count"> 
     <font color="#9e9e9e"> 
     Page </font><font color="#3e3e3e">{CurrentPage}</font><font color="#9e9e9e"> of </font><font color  ="#3e3e3e">{TotalPages}</font> 
    </div> 


    {block:NextPage} 
    <a href="{NextPage}"><div id="Arrow" >OLDER&nbsp;&nbsp;<i class="fa fa-arrow-right"></i></div></a> 
    {/block:NextPage} 


</div> 

</center> 
{/block:IndexPage} 

</div><!--END entirety--> 


<script type="text/javascript"> 

var $container = $('#container'); 
$container.masonry({ 
      itemSelector : '.post', 
      columnWidth : 1, 
      isAnimated: true 
      }); 
      //menuStripe 
$(document).ready(function() { 
    var toggle = false; 
    console.log('start'); 
    $(".menuButton i").click(function() { 
      if(toggle == false){ 
       console.log('toggle on'); 
       $(".menuStripe").css("top", "300px"); 
       $("#menu").css("height", "540px"); 
       toggle = true; 
       return; 
      } 
      if(toggle == true){ 
       $(".menuStripe").css("top", "90px"); 
       $("#menu").css("height", "340px"); 
       toggle = false; 
       console.log('toggle off'); 
       return; 
      } 
     }); 
    }); 


</script> 

</body>

來源

2014-02-28 CJHornster

撥弄我的朋友 –

我該如何擺弄tumblr代碼？帶有像{post} – CJHornster

嘗試IE9 -MS-變換：平移X（100deg）;/* IE9 */

.LikeReblogButton{ 
    webkit-transform: translateX(50%); 
    -moz-transform: translateX(50%); 
    -ms-transform:translateX(100deg); /* IE9 */ 

    transform: translateX(50%); 
    vertical-align:middle; 
    width: 300px; 
    height:100%; 
    display:table-cell; 
}

來源

2014-02-28 07:36:48 adminfd

謝謝你，它確實工作...現在我發現它也不能在IE 11中工作，但是在-ms-transform之後：translateX（100deg）;它開始工作，所以再次感謝你;） – CJHornster

沒問題，只是標記我的答案，它解決了你的問題，給我的聲譽;） – adminfd

這個腳本jquery_backbone_lodash-modern.js沒有按」在ie8中工作。

我得到的是，在ie9之前的瀏覽器中不支持document.addEventListener。

通常的解決方案是：您必須在IE9之前的IE版本中使用attachEvent。檢測是否定義了addEventListener，如果不是，則使用attachEvent。

從addEventListener not working in IE8

編輯：

whops看來你已經確定。但是，這是我從即有：

big mess

來源

2014-02-28 07:36:01 nowhere

的前綴謝謝你的評論，但我不是100％確定你是什麼意思 – CJHornster

我更新了我的答案 – nowhere

ok thankx我會修復它;） – CJHornster

居中的div不能在IE8中工作

回答

相關問題