如何使這個圖像響應，而不是在IE 8上不小？

Question

鏈接到我的網站：

http://tinypic.com/r/11t20k7/5

我遇到了很多的困難讓我的形象來響應，而不是IE 8.縮小頁面本身工作正常：http://foxweb.marist.edu/users/kf79g/about.php

的問題圖片在大多數其他瀏覽器上。我希望頁面看起來像它在大多數現代瀏覽器上所做的一樣。

我所有的代碼都位於外部樣式表（後右點擊查看源代碼）：

<div id ="about_center"> 
       <div id="dp_section"> 
        <img src="images/Business%20Picture.jpg" id="dp" alt="Leonard Pfautsch"/> 
       </div> 
       </div> 
       <div id = "new_line_about"> 
       <div id='about_section'> 
        <p> 
        My name is Leonard Pfautsch. 
       </p> 
       <br/> 
       <p> 
        Currently I am an student at Marist College in Poughkeepsie, NY. My area of study is Information Technology, but I am still 
        very interested in the Computer Science field as well. At school and at home, I am always studying and learning new things. 
       </p> 
       <br/> 
       <p> 
        In my studies, I have really gained a fascination for all aspects of technology. This includes: 
        web development, internetworking, system administration, information security, data management, computer architecture, 
        cloud computing, gaming, and mobile application development. 
       </p> 
       <br/> 
       <p> 
        In all aspects of work, I always strive for perfection. Whenever I work, I make sure the job is done correctly and efficiently. 
        I always do my best with any challenge I am faced with. In terms of client satisfaction, I will go above and beyond to give 
        people the best experience possible. 
       </p> 
       </div> 
       </div> 
     </section>  


/* ABOUT */ 
#dp_section { 
    float:left; 
} 
#dp { 
    border:10px solid #161616; 
    width:200px; 
    max-width:100%; 
    border-radius:10px; 
    box-shadow:0px 0px 15px #272727; 
    margin-bottom:10px; 
    background-color:black; 
    margin-right:10px; 
    margin-left:-10px; 
} 
#about_section { 
    width:100%; 
    max-width:100%; 
    margin:0px; 
} 

section{ 
width:100%; 
} 


#about_center{ 
width:200px; 
height:auto; 
margin:0 auto; 
max-width:100%; 
} 

我想在我的知識，一切以解決這個問題，但我堅持。我也嘗試過修復我的大部分問題的responsive.min.js，但沒有解決這個問題。如果有人能幫助我，我會非常感激。

Answer 1

也許你需要清除你的瀏覽器緩存？圖片對我來說一直適用於IE 7，但IE 7中的文本呈現在圖片下方。 #dp在你的CSS也許應該有一個高度，float:left;像：

#dp{ 
    background-color: black; 
    border: 10px solid #161616; 
    border-radius: 10px 10px 10px 10px; 
    box-shadow: 0 0 15px #272727; 
    margin: 0 10px 10px -10px; 
    width: 200px; 
    height: 279px; 
    float: left; 
} 

注：

您的圖片是1509px寬2104px高。您應該使用圖像編輯器來調整圖像大小，並將其以適當的寬度和高度存儲在您的網站上，否則加載時間會更長。你可以圍繞着它想：

<a id='dpLink' href='images/Business%20Picture.jpg'> 
    <img alt='Leonard Pfautsch' id='dp' src='yourResizedImage.jpg' /> 
</a> 

如果你想使一個鏈接到你的原圖請確保您的CSS看起來更像：

#dpLink,#dp{ 
    width: 200px; 
    height: 279px; 
    float: left; 
} 
#dpLink{ 
    display: block; 
    border: 0; 
    margin: 0 10px 10px -10px; 
} 
#dp{ 
    background-color: black; 
    border: 10px solid #161616; 
    border-radius: 10px 10px 10px 10px; 
    box-shadow: 0 0 15px #272727; 
} 

此外，border-radius和box-shadow是HTML5，所以它們不會在IE 9之前的瀏覽器中呈現。