|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14413
- 金币
- 2492
- 威望
- 1647
- 贡献
- 1440
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
& Y3 T0 B- t! ~! _% Z& q关键在于：max-width:780px;以及下面那行。! W" R% G3 [: P* B5 b
固定像素适应:" b2 R; B1 h3 |" j7 L" N/ p
2 u2 g; M. x# mdotted; 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> 以下是引用片段：
' }& H9 ?) {( g$ H<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> ) D ]$ z, X0 J4 L
<html xmlns="http://www.w3.org/1999/xhtml";> 3 W* F$ I2 x' G
<head> # I, s* n& b, I
<meta http-equiv="Content-Type" c />
6 n; V9 L5 q/ @<title>css2.0 VS ie</title>
! b# H0 Q, L) S<style type="text/css">
F, t6 n+ z9 l( l* e- ~* ?4 }<!--
7 w, Q- o5 G" l, f5 ~& ?body {
: @2 C1 Z* T/ j9 M- ~$ P* f( S' ~ [font-size: 12px;
4 {5 {" Q. g5 T) ptext-align: center; " }/ e, O E. e: K- ~2 ~' t8 k m
margin: 0px; % b+ ?# z1 [2 F" h% @8 R
padding: 0px; 6 ^7 v2 S, j! r1 b6 |* X2 J: h
} ' V6 N/ n1 j5 w
#pic{
# j q0 ]( S+ K# u4 I' O+ H margin:0 auto; ! \) K- ?: h0 t5 J& o0 \
width:800px;
( z6 L( B' o" ^2 M! x padding:0; ; y' }4 P) s, A _
border:1px solid #333;
4 O' Z. k+ a& S) F' S } ( k: z/ d$ p6 }+ z
#pic img{
- d0 b$ U/ Q N8 W max-width:780px;
, N* q5 k' n$ I; Fwidth:expression(document.body.clientWidth > 780? "780px": "auto" ); - _% e& s0 |0 F
border:1px dashed #000; ; f) d' a2 \" }
}
2 @! a) ^+ l# s5 W. ~# ]3 R-->
- ?. R; N: b2 e) E5 l3 N7 E: }</style>
& t% e# ^" s- M% h* T' Z0 V) Q2 q</head>
6 K& m* V8 X7 E9 ?8 p* J& @<body>
# \; X5 V( A) h! m<div id="pic">
: m$ b, k6 I. }6 Y# C: U7 n4 h9 H<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 6 U( i! c- S% S5 k3 X
</div>
$ ?7 X2 j. z% x" E& I</body>
/ H( i$ E1 u- T5 r% x" u</html>
) c0 i# l6 z9 i: p. j9 {( a" @3 U4 y* h% r2 F! q# e
百分比适应:' X" ^: V) g1 |' {
以下是引用片段：
) E$ _; m# w7 J0 h) H/ T3 ^<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 2 O* B' O5 l R( n& F3 S
<html xmlns="http://www.w3.org/1999/xhtml";> 1 z' Y( J; }( V1 L' v$ ~+ Q' D/ p
<head> 4 d; K5 l0 n5 i) p4 G0 j
<meta http-equiv="Content-Type" c />
) {6 o' G! l Z1 g% |: C$ L. a<title>css2.0 VS ie</title> 3 i1 G& F+ C7 L6 r9 v
<style type="text/css">
$ g |, u+ c. [7 m<!--
3 T1 \- q2 h) G) I' T: ^body { 9 P8 R* F# W; L. L5 a5 \
font-size: 12px; 7 S0 M' Q* |9 r" L& Z' ?
text-align: center; * r0 a" s0 o+ `5 K' U1 ?; M. N" D& S
margin: 0px;
# p/ _1 G4 P# C: O* Opadding: 0px;
* w+ Q# ?! d% H: m h5 o4 U}
# a) H" c9 c+ G, o9 r6 N6 {#pic{
. ?, s5 p% H6 o7 H5 R9 \* h2 s margin:0 auto; & C2 `/ p% J. o0 U- ~6 o" j
width:800px; ! x7 P* U2 N! n( v$ y
padding:0; & H [; v& R' Z6 r6 i3 V) p" A6 J
border:1px solid #333; 5 B( u. I# r" f- p& y
} 4 U7 a; P) `* B3 C. c. U6 y& \; F4 h
#pic img{ 9 H' \ f) V9 t
max-width:780px; 9 _ L1 f7 A: I$ L: |; F
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
4 k# o% M0 t4 ?% bborder:1px dashed #000; 3 ^3 H$ i" }- d: J
}
3 A' D" @' \- g7 \7 ?# f-->
- Y/ F- G* y/ ^+ H" ]$ n. c0 t. v1 y</style>
( A o* n0 U; z" W: D</head> ; F9 |' b1 a3 ?2 h
<body>
( A9 ?: T: G/ j' A8 F& T<div id="pic">
2 }" G* u- N$ S. n. H* R<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 7 o& @* p% E. U* z* T. c
</div> / k, A% L/ T8 ~7 y7 w* v
</body> . @) x1 l: S+ w+ o- f9 C, C0 D* {
</html> |
|
发表于 2007-12-8 14:55
| 