铬问题:图像显示不正确

时间:2015-03-18 10:33:33

标签: css list google-chrome

我一直在研究和尝试一段时间,但仍遇到同样的问题:

我正在为我的新网站运行测试,这似乎在大多数浏览器中都能正常运行,但在某些智能手机上却没有使用chrome。它是关于这个网站: http://www.beatekoerner.com/new/works.html

图库中的图像排列为"显示:内联" (在" image" -class中)并在firefox中正确显示。

但是,在chrome中,页面看起来像这样: http://www.beatekoerner.com/work/11025027_10205551999857433_2043483876_o.jpg

这根据智能手机的不同而有所不同(我看起来与众不同,截图是朋友的截图)。最奇怪的是,似乎有可能修复"再次单击链接的错误,但不是重新加载页面。我无法通过强制重新加载来重现此行为。

我在此期间摆脱了subnav(墙/绘图等),所以请忽略它。

html中的列表:

  <div id="maintext" class="tiles">
  <div class="image"><a href="works/time.html"><img src="images/thumbnails/time.jpg"><h2>time</h2></a></div>
  <div class="image"><a href="works/shame.html"><img src="images/thumbnails/shame.jpg"><h2>shame</h2></a></div>
  <div class="image"><a href="works/letters.html"><img src="images/thumbnails/letters.jpg"><h2>letters</h2></a></div>
  <div class="image"><a href="works/matter.html"><img src="images/thumbnails/matter.jpg"><h2>a matter of time</h2></a></div>
  <div class="image"><a href="works/pilesmountains.html"><img src="images/thumbnails/pilesmountains.jpg"><h2>piles and mountains</h2></a></div>
  <div class="image"><a href="works/spring.html"><img src="images/thumbnails/spring.jpg"><h2>spring</h2></a></div>
  <div class="image"><a href="works/radical.html"><img src="images/thumbnails/pileportraits.jpg"><h2>radical archaeologies</h2></a></div>
  <div class="image"><a href="works/organ.html"><img src="images/thumbnails/organ.jpg"><h2>organ</h2></a></div>
  <div class="image"><a href="works/pilestudy.html"><img src="images/thumbnails/pilestudy.jpg"><h2>pile (study)</h2></a></div>
  <div class="image"><a href="works/older.html"><img src="images/thumbnails/older.jpg"><h2>older presences</h2></a></div>
  <div class="image"><a href="works/fliegenklatsche.html"><img src="images/thumbnails/hellenaechte.jpg"><h2>works for<br/> "fliegenklatsche" magazine</h2></a></div>  
  <div class="image"><a href="works/spp.html"><img src="images/thumbnails/spp.jpg"><h2>stop/pause/play<br/>magazine</h2></a></div>
  <div class="image"><a href="works/less.html"><img src="images/thumbnails/pile.jpg"><h2>less</h2></a></div>
  <div class="image"><a href="works/lecture.html"><img src="images/thumbnails/lecture.jpg"><h2>lecture</h2></a></div>
  <div class="image"><a href="works/writing.html"><img src="images/thumbnails/writing.jpg"><h2>writing on the wall</h2></a></div>
  <div class="image"><a href="works/weary.html"><img src="images/thumbnails/weary.jpg"><h2>weary</h2></a></div>
  <div class="image"><a href="works/corrections.html"><img src="images/thumbnails/corrections.jpg"><h2>corrections</h2></a></div>
  <div class="image"><a href="works/assertion.html"><img src="images/thumbnails/assertion.jpg"><h2>behauptung (assertion)</h2></a></div>
  <div class="image"><a href="works/100years.html"><img src="images/thumbnails/100years.jpg"><h2>100 years of sleep</h2></a></div>
  <div class="image"><a href="works/wryly.html"><img src="images/thumbnails/wryly.jpg"><h2>wryly</h2></a></div>
  <div class="image"><a href="works/interchange.html"><img src="images/thumbnails/interchange.jpg"><h2>interchange</h2></a></div>
  <div class="image"><a href="works/blink.html"><img src="images/thumbnails/blink.jpg"><h2>blink</h2></a></div>
  <div class="image"><a href="works/tram.html"><img src="images/thumbnails/tram.jpg"><h2>tram</h2></a></div>
  <div class="image"><a href="works/sadmovie.html"><img src="images/thumbnails/sadmovie.jpg"><h2>sad movie</h2></a></div>
  <div class="image"><a href="works/neckarsteinach.html"><img src="images/thumbnails/neckarsteinach.jpg"><h2>neckarsteinach</h2></a></div>
  <div class="image"><a href="works/reading.html"><img src="images/thumbnails/reading.jpg"><h2>reading</h2></a></div>
  <div class="image"><a href="works/balance.html"><img src="images/thumbnails/balance.jpg"><h2>balance</h2></a></div>
  <div class="image"><a href="works/but.html"><img src="images/thumbnails/but.jpg"><h2>aber (but)</h2></a></div>
  </div>

以下css定义:

#maintext { 
position: fixed;
top: 180px;
height: 70%;
overflow: auto;
margin: 0px auto 0px auto;
width: inherit;
z-index: -100; }

#maintext img {
    padding: 10px;
    width: inherit;
    max-width: 600px; }

.tiles {
    text-align: center; }

#maintext.tiles img:hover {
    opacity:0.4;
    filter: alpha(opacity=40); 
    outline: none; }

任何想法如何解决这个问题?

0 个答案:

没有答案