0

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

问题图片：

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

我很难让我的图像在 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%;
}

我尝试了我所知道的一切来解决这个问题，但我被卡住了。我还尝试了 responsive.min.js，它确实解决了我的大部分问题，但没有解决这个问题。如果有人可以帮助我，我将不胜感激。

4

1 回答 1

0

也许您需要清除浏览器缓存？回到 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;
}

笔记：

您的图片宽 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-radiusandbox-shadow是 HTML5，因此它们不会在 IE 9 之前的浏览器中呈现。

于 2013-06-25T23:58:09.193 回答