|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14333
- 金币
- 2452
- 威望
- 1647
- 贡献
- 1400
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。5 d. j; e! U* H: g
关键在于：max-width:780px;以及下面那行。% j0 s/ V: |- G4 I
固定像素适应:
9 ]3 j* S/ S5 q: T8 U7 i' U6 f+ E$ @
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> 以下是引用片段：/ v+ d3 k" q0 R F1 ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
. d; a- o; R5 y9 u! C<html xmlns="http://www.w3.org/1999/xhtml";>
& @$ a7 w" R% N# G' R3 }, T. u<head>
' M% r5 g9 a, I# I<meta http-equiv="Content-Type" c />
! x: u/ Y0 r+ k! Y* x<title>css2.0 VS ie</title> 2 |5 S- b+ y1 A) j6 V0 T" p& [. Q
<style type="text/css">
2 \, H* M2 p* k1 W8 q- |* i7 U& N<!-- 8 x- C( N+ |! r4 ^& N
body { . j7 @( f1 _4 K$ y* P9 I0 c1 L: U
font-size: 12px; % B3 o+ p/ H! l8 s1 r2 `
text-align: center; n; ^4 e) @2 B+ R% t8 _+ r& N
margin: 0px; 1 b; p k# s: |# e$ j/ R/ z
padding: 0px; : q+ [+ `8 f. C6 @3 l
} - Z# p3 p! t% H+ F: B3 x# ]
#pic{
' k" e" `, V! y/ J margin:0 auto; 4 n8 b3 e5 o) Y( R) i
width:800px; & m% \$ Z! Y' m% P
padding:0; - r7 K' [- Z* D3 `$ @" z
border:1px solid #333;
) G( A% C4 R+ f* {5 {5 H' a' ` } 8 a* @' ?' C; ~( J- T" S1 X7 e% e( R
#pic img{ + G+ w6 m4 {; E0 H
max-width:780px;
3 T7 y6 @% J) F4 V% |6 F1 ~width:expression(document.body.clientWidth > 780? "780px": "auto" );
; m! C* X& L3 F9 Vborder:1px dashed #000;
% y! G' e0 S4 Z5 [} * d1 {7 @6 e" q5 H9 z4 N, h
-->
- l3 Z+ V5 F! p; p2 }</style> : N3 k* s3 N. X" z# B% k
</head> $ |, O3 n$ c; d8 [ I
<body> & {: j$ w- B3 ^
<div id="pic">
' O. H7 y u% O& w<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
2 d; |4 ~! X4 e# c" W' |</div> % ?- S- S% I7 ]3 m
</body> 6 x- B0 w) a8 o/ S3 e. z
</html> , i7 ~1 n( o4 D" c- ]1 s. E
R+ V7 ?2 Q. f$ v0 Y7 j
百分比适应:" X$ T+ \3 R8 L" J( ?- _9 A9 S
以下是引用片段：
/ {. C' g" ~- A: R9 g<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> ' \* r E! l4 g" Q
<html xmlns="http://www.w3.org/1999/xhtml";>
, @) F7 ]8 n7 c/ H' H i7 t<head> 3 H( W# ]8 D% b) \' ~) A6 T
<meta http-equiv="Content-Type" c />
9 _9 k4 n: K4 R9 u<title>css2.0 VS ie</title> 7 J# R x6 p/ c! [8 M V
<style type="text/css"> $ n4 U# O+ M) H$ E4 I
<!--
/ x' x. o$ U- R! b" S1 f( r: Jbody { # y: z1 q( s- t8 d! M k: a
font-size: 12px;
; C5 G5 ^ Q( a/ P) ]+ ?9 j; ^+ Rtext-align: center;
6 z6 A; ]8 z* t) ~- jmargin: 0px; - v0 `8 f5 g! m# @% F
padding: 0px;
$ m5 \" g2 ?4 H9 L}
8 V4 ^" T$ {; A#pic{ . T* c0 F# |% H6 O# w8 T- w
margin:0 auto; ! `5 R" |" H' c
width:800px; $ @$ u) Z9 N) z1 ~* M
padding:0; . ~. ~5 Z0 f7 t/ L" ]
border:1px solid #333;
8 D6 \" t/ p* B( Y7 D6 }) k& I } 8 V8 t( d; M4 |# v7 p' ?: p
#pic img{ 1 E( b$ w5 {( w( | T. ^9 g
max-width:780px; . z$ `- i* I4 _% @% {% Q1 n
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); - w: N' Z7 M; n
border:1px dashed #000; , C- e, b! H7 n2 [% p1 S8 r" m3 Z
} 4 p( L5 [& M0 A l( q3 p) b
--> 1 b7 `, c. H- s- }5 G& H% d
</style>
) ]* Q; B. u( ?. j</head> j/ D0 q2 \5 u5 [3 \ Y) ?3 N
<body>
U* i4 a' Z( w<div id="pic">
/ A0 g, A: L) e& W; b<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 2 g* I8 p8 Z+ q1 \
</div> 2 b9 f( w4 }$ f; H
</body> 1 `6 U4 B& q* O* E& X
</html> |
|
发表于 2007-12-8 14:55
| 