|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14329
- 金币
- 2450
- 威望
- 1647
- 贡献
- 1398
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
3 w0 \5 V3 s6 ^% `* I- K关键在于：max-width:780px;以及下面那行。: D" ^! P+ c. E" `& |( t- T5 y8 z
固定像素适应:) P3 ]5 E- F0 ?5 D+ |9 e
+ l# p* O8 z/ }+ l, m* y' ^9 kdotted; 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> 以下是引用片段：$ `7 {( O9 ~5 L
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> , {' Q; P* F2 {7 [( R
<html xmlns="http://www.w3.org/1999/xhtml";>
/ F- I+ v! Y4 g' p" w( l- w/ c<head>
- [' L% m. ?" v) V4 k3 G3 |; ]<meta http-equiv="Content-Type" c /> 6 K d/ Y+ Z7 v5 Z* b
<title>css2.0 VS ie</title> % V. g4 ~4 U/ ^7 N( S4 u8 `
<style type="text/css"> 0 W l+ u/ G4 R8 \* m
<!--
# ]) f5 T5 R# [9 [& lbody {
2 N) B& C" W3 v$ x, Rfont-size: 12px; % ]5 l: n! F( F( Q$ P8 g
text-align: center; " y+ F) _! S7 C4 F, H
margin: 0px; / V& } t& y# \6 v8 G6 g5 _4 D
padding: 0px; 4 n0 c8 b2 d* Z% ]1 t& N) v/ c
}
( T9 n+ g; ~* |#pic{ " |4 i( G, n9 P9 i+ i5 x% [9 P2 f3 S
margin:0 auto; 8 |4 W& M1 A( U. B( K+ f8 m [6 A! m
width:800px; . I: ~4 T1 [' I1 `
padding:0; ! Q1 D6 S6 k: f& {$ F/ ^. i( b
border:1px solid #333;
8 t0 U# S2 e. {0 q) h% s } 5 v; |- R$ X" h* v6 H x k
#pic img{ 8 g! s: w; ~+ p, |
max-width:780px;
+ O: X9 ^" E4 l& ?- Z) swidth:expression(document.body.clientWidth > 780? "780px": "auto" ); 8 N; P4 v8 {+ |2 K, D
border:1px dashed #000;
$ U' T, [0 _0 C) u* M y5 x0 C}
+ B2 _/ |7 Y$ q( Y-->
( U. w3 Z! e, F% Z- |. B</style> ; u9 y% x; i0 }) q/ [
</head> R2 B5 @% U* o: }
<body> 6 ~1 Z. [/ i+ V: X! Q( C* r" A3 ^! [
<div id="pic">
* S% p2 Q. p5 E; |4 O<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> ' D9 F l3 {' G# S( _
</div>
4 v7 P# }5 J3 g# O+ @1 i& ` x( ?! n</body> + i/ X; a- n: f( t7 o8 O6 t2 u
</html>
4 Q3 B- l8 z/ ~, m
: o" ?7 z4 I- E# p" H B3 W百分比适应:
6 E1 L5 g) V4 A( t0 \6 `; j1 T以下是引用片段：
) H+ B+ V4 `- R- p<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
% [: M4 B5 W9 I" l' |<html xmlns="http://www.w3.org/1999/xhtml";> $ K u5 c& ~7 m/ k4 j
<head>
; Q( ?: \. r; v+ m<meta http-equiv="Content-Type" c /> * F$ E4 _3 ?( `0 E t0 w, K
<title>css2.0 VS ie</title>
0 z8 A. [9 ?% h6 I% Q$ V<style type="text/css"> 8 E9 Y I1 g. T# k: D5 C
<!--
7 g6 A' p# b9 ?8 e, Lbody { # G# p" P: u% P' |- s3 B
font-size: 12px; & i4 C# [7 d2 z& h/ e9 G4 ]! L
text-align: center; " H8 d1 @( ] ~# y1 |
margin: 0px; 6 L j' U3 S# S
padding: 0px;
! T4 X4 C# K: y. u- {}
) w" y: K: w$ n( Z/ l#pic{ , L/ i. l v6 X
margin:0 auto; * O7 Y; s ]( P* h! A
width:800px;
" A8 \# q2 N- T; k' H; B2 P padding:0;
2 e1 n0 Q( b% u3 m8 { border:1px solid #333; 2 o; ^4 b0 l1 s: q$ n$ n$ x
}
5 q& `' @! l0 u+ [9 \#pic img{ % t9 F0 R: M8 o7 R
max-width:780px; 1 f9 c$ D% d P
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); , l6 A$ s4 W7 v5 _/ T4 |0 }- l
border:1px dashed #000;
/ P. w- m) m1 Z n& d/ f4 r0 A} % N; @" |) G' ^: {5 n' U
--> : V$ T7 t2 R. y0 r9 x; [
</style>
( J1 g1 V" i5 _/ v</head> " S& y' F+ A q
<body>
3 l% m5 P9 {- w/ | T- ~4 Z<div id="pic"> # I7 w9 E% s' @, {5 S! E$ A
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> / x7 M* ]7 r7 R# K
</div>
5 t* t3 f, F7 P! t</body>
8 ?8 U. a. N- y; l</html> |
|
发表于 2007-12-8 14:55
| 