|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14333
- 金币
- 2452
- 威望
- 1647
- 贡献
- 1400
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
- @4 g' d. M$ B2 O关键在于：max-width:780px;以及下面那行。1 h8 T4 N4 k) \2 t7 [3 I& I8 M$ f
固定像素适应:' R3 A. V' ]7 A5 @
. C& J5 J1 F5 U
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> 以下是引用片段：/ y* p+ a o2 Q' X
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
; f! H$ N7 L/ S% _7 T8 m6 `<html xmlns="http://www.w3.org/1999/xhtml";>
: l/ x' c: I {7 b<head> 3 v+ ~+ r3 h+ O! y* v% X0 B/ |" O
<meta http-equiv="Content-Type" c /> ) w! \6 [5 R( _$ ]2 P b3 \1 H
<title>css2.0 VS ie</title>
! q; U/ R5 V3 ?8 F<style type="text/css"> 5 j' ^ i& E& S& R$ o! u: O
<!-- ; j6 G4 q8 j$ v, ~" \$ `
body { 8 X% c2 y/ N/ j4 Z- i
font-size: 12px;
* m. j3 j6 t2 B1 h7 Z4 Wtext-align: center; 3 s; T# v* M- u$ {
margin: 0px; % `6 F3 }2 J# V c
padding: 0px;
& d3 A0 B- Q: y} ; T& ?: @' C* S$ \4 H$ J- R
#pic{ ) {3 b+ D# Y3 L1 @ _
margin:0 auto; 1 t" J! D6 ]- {1 e* I7 u$ o
width:800px;
, i* |, K# h- h) m padding:0;
/ l9 |' {/ h; K0 O7 F border:1px solid #333;
# P1 s2 ?0 M7 |7 E5 K: q7 |, g } 3 H: ?1 I/ J2 y6 P1 N
#pic img{
1 n' p0 O% C. d& B5 P% G0 Z) G max-width:780px; ; K0 s+ W' }- n; q- z' i0 W$ u- s
width:expression(document.body.clientWidth > 780? "780px": "auto" );
: e5 z: X( I8 L) c) v0 ?border:1px dashed #000;
* v/ W" w( b$ [ O5 l9 x2 N' i} 6 Y8 ~7 _1 ^0 }5 y9 z
-->
2 Z' }" N2 c4 k0 H; }* I3 D$ w</style> u! d7 q" _/ @
</head>
3 e( S) a4 n% g/ d" e" [<body> # \, g3 S4 H6 ?; e$ Z( ~% F0 j
<div id="pic">
# [. u1 l$ Z2 v<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> * z" d7 ]: m ~+ I$ m
</div>
2 Q; |; R. j) F! ?7 F( X0 o! y% Y: ^</body>
, y0 _+ `6 P7 L ?7 w, s0 U</html> + }. r( q% B. ?7 @4 Z( u. [
6 k8 w; }. X, ?# H6 E3 l. l% x+ o
百分比适应:
4 ^) `9 X8 J& I8 q# e1 E# h以下是引用片段：
1 \7 s0 z- m- f5 g5 ]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> . {( w$ e9 w8 g% j$ A9 d# W3 G
<html xmlns="http://www.w3.org/1999/xhtml";>
3 S3 {! O) x. A6 \<head> 0 {' Y; D' L7 T1 I2 \
<meta http-equiv="Content-Type" c />
# M* G. U. [( A W<title>css2.0 VS ie</title> * q X5 N s( X$ g" ~( G
<style type="text/css">
0 ~- b/ p5 f5 [, u' x<!-- * s/ Z' y; i* ~2 C" s
body { * H+ e( S5 r7 R
font-size: 12px; ) m, L1 z) T: W8 c! J1 q
text-align: center; 8 _. |, ]7 v# D# @; z* E' W9 q
margin: 0px; + E( y3 x2 O) t. [
padding: 0px;
* O8 R* K q3 Q/ @2 P2 y& O}
) ^, c. q) w4 Z2 X; f# D: o! R#pic{ . j. Z9 T% G8 V+ t9 A: L
margin:0 auto; 4 x" U6 X4 h2 @% i: P3 s
width:800px;
6 C3 T& D+ p7 [ padding:0;
8 e3 {! |/ t# Z+ g0 R border:1px solid #333; - P. m' ^) t: u% o, r
} ( n* `( E* Z( N7 K: L" u& r5 L
#pic img{ ; ?6 V5 J/ F9 V
max-width:780px; & ]; }0 v O; b' c4 L5 R' V( W
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
) \. M2 z ]4 kborder:1px dashed #000; ; M, n p- D! [$ ^- ^. q
} % f q$ ~7 I6 b6 e* q, J" g. j- ~
-->
( j/ X! x( c2 k( y+ @& v" e& t( G</style>
: ~3 d \' A. n+ H; ?: s</head>
" ^1 X& O/ n8 f' D; ~6 d<body> . S- S0 s% |5 f, B" y) c! g
<div id="pic"> / Z7 w" u' w3 E; ~* g" |
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 3 s/ K3 `7 q* ^0 X( @. _5 @6 y
</div> - \- b4 [& a6 i; F
</body> 3 Q# k& o. N g! G" s& J" r9 f6 Z4 o* \
</html> |
|
发表于 2007-12-8 14:55
| 