|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14443
- 金币
- 2507
- 威望
- 1647
- 贡献
- 1455
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
6 b' o8 c/ G: p/ E7 r S5 g关键在于：max-width:780px;以及下面那行。
, ~& K) Y6 G+ m; E2 d6 H0 U2 t! {固定像素适应:
0 w3 M+ @: i. b; X& e, Q
& X2 Q1 ?6 s, L5 J( Z0 ndotted; 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> 以下是引用片段：) L, n+ n5 |& W! o4 \
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 6 E3 {2 W- N! n) t6 A, e
<html xmlns="http://www.w3.org/1999/xhtml";>
! D. `9 z& o( f) b% F<head>
* s. ]( @* E) O. i, `<meta http-equiv="Content-Type" c /> ! l# N Q8 _2 Y: m( E9 |0 l
<title>css2.0 VS ie</title> ( k5 x3 `+ H) | ` K$ L
<style type="text/css"> & H' X* V9 o) {. y, |! {
<!-- 4 {8 o! X0 d7 y
body {
% i9 K5 a9 C) o' s% Ofont-size: 12px;
H2 I" I; B$ c* e/ e4 @' }text-align: center;
' y `. v# e6 v$ Amargin: 0px; * N a4 F, A2 K' M# M& r' y
padding: 0px;
0 l H( X0 P0 B- P+ x: W/ s} ( R4 w! U3 Z( O3 o* M: Q3 V. Y
#pic{ ) p5 |( g) X" V X' h% v* C& e/ I
margin:0 auto;
' x$ b* j, ~, b# x width:800px;
8 h3 ]4 i9 H+ Q4 l padding:0; 2 d2 \0 B, g: w4 w+ l9 g6 m" L' l
border:1px solid #333;
& R: K4 J7 }; s; ^ } , U& Q" o r1 ]* V) X" S
#pic img{ 4 p' m: v9 q d$ L' D
max-width:780px; 9 _# f' P; @2 r5 m1 w7 ~
width:expression(document.body.clientWidth > 780? "780px": "auto" );
3 y% b& D2 h# t5 X$ dborder:1px dashed #000;
" |, S3 M; G* [% X# X/ M} ! O3 _5 B, i# ^- L1 m* a' h* |
-->
# T, A& G$ M; C6 j% M</style> % G+ s9 c% ~2 C8 i4 s
</head> 5 Q- {" R4 z( h% C
<body>
- `5 H- A2 |) l1 i" `% h, y<div id="pic"> 6 n+ r$ z; ?3 b6 I3 S
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> % S: l; }: [( r; B
</div> + L$ x8 B `! E e; V' z
</body> 8 f7 ^" A1 _6 J) i0 M
</html>
+ g: |( a0 \& E+ [" J! k2 s+ i; f; s4 p- N% K. A, @
百分比适应:1 U F/ ]+ O: i- g+ k% i2 \
以下是引用片段：# ], F9 e! t) {, C- d7 U
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
4 o" S, m. |' k* ?<html xmlns="http://www.w3.org/1999/xhtml";> ) |) A; U7 D: \6 c& ?
<head> * H R+ }' S% ~* A8 w
<meta http-equiv="Content-Type" c /> ) y' s9 {3 y" x& [
<title>css2.0 VS ie</title>
1 W( D2 \- J9 f3 `7 ` w' I<style type="text/css">
% f s4 D% I% _<!--
3 N6 z' j" Q/ N9 nbody { 7 O9 D2 H( d; v
font-size: 12px;
5 P5 G/ Y$ b3 C. otext-align: center;
) y8 a3 N* @; s& {margin: 0px; % E# _/ }0 s% a2 X! }( g; }2 C
padding: 0px; 9 e W0 S% I% \/ ]6 D+ k3 `
}
& O- \5 A" y. E* B! [7 E! h#pic{
2 B* n7 V3 U4 L4 ~4 z8 ? margin:0 auto; 4 l/ O1 K# H* l" {3 E6 s! u* O! M( X$ v
width:800px;
5 J. z5 i4 I' j! i/ | padding:0;
* j/ H# W. H/ [8 [0 [9 Q border:1px solid #333;
( r1 w' v$ N! }$ d& ?. z } / @$ j# I' n# u
#pic img{ 5 n3 T& c: [+ `5 s J
max-width:780px;
- H9 X4 p" |# j# g& v5 \1 _: Rwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
U6 k# S4 b, W" J3 pborder:1px dashed #000;
- j8 E1 E# |7 k. E: ?} - r9 G# d5 q' X! y0 v* r9 v+ r
-->
; \! \! M2 o* I( b9 T! m/ k2 @</style>
" ]- G5 Z( z8 f# s</head>
5 T4 J1 F, Q, @7 h+ r* U<body>
) k+ ^6 e! `! s: P1 z7 R<div id="pic">
) N% U+ A' H- M6 [" t<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> / @& y( F2 ~7 J& Z
</div>
9 Z' R5 Y5 z: ~! a</body>
) N4 ]7 f1 a) T4 n: u</html> |
|
发表于 2007-12-8 14:55
| 