|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14357
- 金币
- 2464
- 威望
- 1647
- 贡献
- 1412
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
1 B8 R" {3 {4 h6 L! X8 e关键在于：max-width:780px;以及下面那行。 L. `" G/ \* O$ N
固定像素适应:
% e) m3 t0 e# C% |0 A) y+ w: P1 i, |" K1 ?
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> 以下是引用片段：
& ?4 F- e, V- A% V. w! Q( a1 B. c<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
. [6 }& K' [- B c0 q3 V+ `0 q<html xmlns="http://www.w3.org/1999/xhtml";>
, C- f' g3 I; y" W0 K& c4 c<head>
* j9 `6 C# h% K<meta http-equiv="Content-Type" c /> 4 p$ e7 p0 j! u$ \
<title>css2.0 VS ie</title> 7 D: z1 `) Z+ s g1 K
<style type="text/css">
* y0 }1 e" Z4 W' H8 D: R. j<!--
3 a# [9 C+ F3 o3 |+ hbody { - b1 W0 h& U& D# f9 Z4 q( a1 r' M
font-size: 12px; 8 `( e/ s! `6 Q- D8 N, \, v3 x
text-align: center;
, G$ s) D0 l0 Q4 O7 \3 Zmargin: 0px;
0 i% [2 T! J; z1 p# ] M! @padding: 0px; ( z5 i" Q% |5 T( c9 b( R5 c9 [
}
# I7 O i8 [# Q$ V/ r7 l# h#pic{ # A9 w3 [* W% `, e' r
margin:0 auto; 7 |) E. ]& I- u& N: h! x
width:800px; $ H: ^5 w; ]9 x* `
padding:0;
3 \2 X( K+ A" J! e/ @ border:1px solid #333;
6 v" [8 ?0 X9 r8 R1 X s' R" S }
# `' U$ @, B# x, B& v#pic img{
6 e1 w7 @, n6 L9 M9 y6 t max-width:780px;
: ~4 g; J0 ^4 K/ H% Rwidth:expression(document.body.clientWidth > 780? "780px": "auto" ); , a! ]4 x( n& I- q
border:1px dashed #000; 5 B3 L& d; I7 C0 `' g
}
- x( G: e/ u8 T1 P7 s9 ?$ u- n--> 8 I% z2 c4 }4 K$ q
</style> * J5 r9 F E) Z! q' o( Z. L
</head>
, B( ^- F; Y! P. i( b( M% u<body> ! {6 a u; a$ `$ h% k
<div id="pic"> 3 a& t1 l: Q0 P9 H7 l; B
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 7 O" a( b7 `0 A3 e# m
</div> ) |5 K( o8 Q2 i& r0 n& F* {
</body> 4 w1 d7 F3 ^ U5 e$ G; w8 E: f
</html> / ~: P, V8 o% j
, d, J" W) x0 Z* \百分比适应:7 P& X# q; V H# S$ t
以下是引用片段：
- [2 K! e( E" o<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
; n# x+ Y$ `2 W* D: r8 b<html xmlns="http://www.w3.org/1999/xhtml";>
! z; M9 L7 r! _5 t2 |<head>
! k) D' g. {# C<meta http-equiv="Content-Type" c /> : ]% u3 D4 x1 M; N, C% _1 p
<title>css2.0 VS ie</title> ( e4 z. q5 f6 i& i; z
<style type="text/css"> 2 `: X& w7 ^* a3 ?5 S/ u
<!--
6 d. ?% T" x& h- d- V$ \body {
& K# m8 h3 D* h7 ?. Pfont-size: 12px;
; p% U* z/ s& \4 ]text-align: center;
( j3 {1 ]& A Y2 e. ]2 @margin: 0px; ' g: ?4 R$ o$ o# p: {
padding: 0px;
) ]7 E3 V- l+ W& J# A8 L% s; m}
( R& j1 f/ [; ^$ v, c' s#pic{
" b! O9 V( w7 V8 }, o& H" q" k margin:0 auto; , ~+ D! J8 ^! {/ r0 A
width:800px; ; h9 `0 L: _0 v S. O- q/ {
padding:0; 8 H! i0 k) a) {0 ]* X
border:1px solid #333;
4 Q! z2 L/ D5 m9 D$ X: }$ \$ t } 8 @/ [7 y E6 j3 M5 M/ ~" A
#pic img{
5 a' U& {3 v# R) t& H" R, Z& R max-width:780px;
, s/ u1 N( e8 A$ x, u1 x* @8 f, swidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
* W, k, ^# P# s4 k! V' lborder:1px dashed #000;
, o, y% q' R% ], X& T6 g& U4 [}
4 x7 k' C8 T3 d6 c8 P--> 6 Z* s/ N1 u: m8 d
</style> 7 h# r' Z' u) i
</head>
- T% O: r% [! z9 K/ F! F% t<body> 0 u6 @7 e- P8 P3 D
<div id="pic"> ( ^& T9 h9 d, K
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
; D0 s0 N6 f, f& c/ s0 E0 l" I</div>
; c( n$ o, ?* p7 U# `</body> 8 D; k1 C( x! E4 e; D6 u* D
</html> |
|
发表于 2007-12-8 14:55
| 