以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。! s) ^8 Z( d+ \! R0 |5 m
关键在于:max-width:780px;以及下面那行。' W- E1 x, Y6 m 固定像素适应:5 l8 t t9 S. v4 v7 f \% b
: I( u, k* r% Y* [dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellSpacing=0 cellPadding=6 width="95%" align=center border=0> 以下是引用片段:+ j0 c2 v) E6 P1 R7 c' }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 1 X r: F, F. H, A$ N- G<html xmlns="http://www.w3.org/1999/xhtml";> 3 }9 F3 w. R3 ?3 q2 k8 `
<head> 2 g l! t5 M. i# t
<meta http-equiv="Content-Type" c /> 8 V" b& @9 s; P: E
<title>css2.0 VS ie</title> ' a! Z3 E% f' R6 b# I<style type="text/css"> 1 x) W S) \& n' Y6 M/ @. B<!-- 1 H: K5 u. V! ^* ^$ O2 D" Ebody { - L/ n3 w+ F. |& p* ]5 ^font-size: 12px; " M" ^8 r) S9 R8 _' j4 }
text-align: center; ; f; l+ z/ R6 H: emargin: 0px; . t' ?# ]0 r% apadding: 0px; . C; ?2 q. \" J" a& I4 d& v
} / G- |& E. g' B# H, u4 O
#pic{ 4 E; E5 \/ L2 V
margin:0 auto; ; x' ?7 k5 S7 n$ e7 O4 d width:800px; ; B! d. x9 S* i' w0 U! K3 R
padding:0; : J9 F: b3 D0 k% E8 K- W( M" C6 k8 y
border:1px solid #333; & U7 m( @+ D p } 9 J+ e+ e- V' k) m- S$ m* M7 N$ k#pic img{ & J8 i+ Q9 f; E max-width:780px; 1 D% Z# v6 l; b2 ?7 Cwidth:expression(document.body.clientWidth > 780? "780px": "auto" ); * L ~* I+ L5 o: p! k
border:1px dashed #000; * u" J# e3 Q9 _6 c9 t} * J0 @8 M: A& v0 u--> . r" `% Z* D# U' _
</style> " n* c# a0 p) l! |' I1 _) ~0 |</head> ; }) w6 }$ c; w* O. k- i5 _<body> 8 o" [1 m& A9 w+ g6 ~<div id="pic"> 8 Y6 ?. Z$ x) ?8 ^0 @+ Z; A
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 7 \2 p6 u/ }& j" M</div> 7 N2 q2 X7 B0 v/ s4 h) Q
</body> . R/ p" T0 G7 W( @
</html> - [ w' M2 M) v. I/ E) f C