Question

链接到我的网站：http://foxweb.marist.edu/users/kf79g/about.php

问题图片：

我很难让我的图像在IE 8上响应而不缩小。页面本身在大多数其他浏览器上运行良好。我希望页面看起来像在大多数现代浏览器上一样。

我的所有代码都位于外部样式表中（右键单击查看源后）：

<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%;
}

我尽我所知来解决这个问题，但我被困住了。我也尝试过respond.min.js，它确实解决了我的大部分问题，但没有解决这个问题。如果有人能帮助我，我会非常感激。

Answer 1

也许您需要清除浏览器缓存？这张照片对我来说一直很好，一直到IE 7，但IE 7中的文字正在渲染到图像下面。你的CSS中的#dp应该有一个高度，而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;
}

注意：

你的图片宽1509像素，高2104像素。您应该使用图像编辑器调整图像大小，并以适当的宽度和高度将其存储在您的网站上，否则需要更长时间才能加载。你可以把它包围起来：

<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之前它们不会在浏览器中呈现。

如何在IE 8上使这个图像响应而不是小？

1 个答案: