Jimdo博客中日期显示的多样化及在IE6中存在的问题(含CSS代码)

      最近Jimdo系统又做了不少改进,博客日期显示方式的多样化就是其中之一。关于这个问题,网上邻居在2010年10月就做过初步探索,效果还是不错的,请见《Jimdo网站的美化 - Jimdo博客标题中日期的修改方法(一)》、《Jimdo网站的美化 - Jimdo博客标题中日期的修改方法(二)》。这次系统所做的改进,虽然也考虑了IE6的兼容性问题,但实际效果似乎并不是很理想。本文先简单介绍一下日期显示的操作方法,然后然后看看IE6中存在一些什么问题。

      我们先看一下,改进后的Jimdo博客日期的几种显示风格:

Jimdo博客日期的显示风格
图一、Jimdo博客日期的显示风格

      除了标准风格保持了原貌,增添了多种显示风格,加上还可以居右、居左显示,以及背景色的更改,确实显得非常丰富。下面看一下是如何设置的。

      登录您的Jimdo网站,然后点击右上角控制面板中的显示风格(A),进入后会发现,除了原来的“字体设置”外,又多了“网店风格”和“博客风格”两项。点击“博客风格”,会出现四项内容:

一、显示内容(日期/月份/年)

      以前Jimdo博客的日期只能显示日、月,现在则可以添加星期和年份。

显示内容(日期/月份/年)
图二、显示内容(日期/月份/年)

二、选择颜色

      包括背景颜色和字体颜色都可以自定义。

选择背景和字体颜色
图三、选择背景和字体颜色

三、对齐

      以前日期是居博客标题右边显示的,现在则可以居左显示。

调整时间显示在您博客的左边或右边
图四、对齐方式

四、显示风格

      除了原来的标准风格外,还有六种及自定义风格可以选择,具体见图一所示。

      本来网上邻居并未注意系统所做的这些改进,有一次偶然用IE6测试东西时,才发现日期显示完全错位了,如下图所示:

Jimdo博客正文日期错位
图五、博客正文日期错位
Jimdo博客显示日期出现背景图片
图六、博客显示日期出现背景图片

      开始以为是自己自定义的日期代码出现了问题,反复检查没有发现问题,用IE6浏览了一下兄弟Jimdo网站,发现存在同样的问题。

老胡的博客日期
图七、老胡的博客日期
网型网秀的博客日期
图八、网型网秀的博客日期

      虽说现在很多网站,包括Jimdo已逐渐不再支持IE6浏览器,并且IE浏览器已发展到了IE10,但在中国,毕竟还有很多人在用IE6,看到这样的东西,真令Jimdo爱好者们难堪呀。希望Jimdo能就这个问题,再做些针对性的改进。

附一、原Jimdo系统日期部分的CSS代码:

div.datetime{float:right;width:44px;height:45px;margin:0
10px 10px 0;background:url(/s/img/cc/datesticker-bg.png) no-repeat center center;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://s.jimdo.com/s/img/cc/datesticker-bg.png', sizingMethod = 'crop');_background:none}
p.day-word{display:none}
p.day{padding-top:4px;font-size:18px;line-height:20px;color:white;text-align:center}
p.mon{padding-top:1px;font-size:11px;color:white;text-align:center}
p.yr{display:none}

附二、改进后Jimdo系统日期部分的CSS代码:

div.datetime{float:right;width:44px;height:45px;margin:0 10px 10px 0;background:url('/s/img/cc/datesticker-bg.png') no-repeat center center}
body.ie-6

div.datetime{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://s.jimdo.com/s/img/cc/datesticker-bg.png', sizingMethod = 'crop');background:none}
p.day{padding-top:4px;font-size:18px;line-height:20px;color:white;text-align:center}
p.mon{padding-top:1px;font-size:11px;color:white;text-align:center}


.dt-style0 p.day-word,.dt-style0 p.yr{display:none}

div.datetime.dt-style1,div.datetime.dt-style2,div.datetime.dt-style3,div.datetime.dt-style4,div.datetime.dt-style5,div.datetime.dt-style6,div.datetime.dt-style7{float:none}


div.datetime.dt-alignment-right{float:right !important}
div.datetime.dt-alignment-left{float:left !important}


div.datetime.dt-style1{width:auto;height:auto;margin:0 20px 10px 0;background:hotpink}
div.datetime.dt-style1 .datetime-inner{padding:5px 10px}
div.datetime.dt-style1 p{padding:0px;text-align:center;color:midnightblue;font-size:11px;line-height:1}
div.datetime.dt-style1 p.day{font-size:18px}


div.datetime.dt-style2{width:auto;height:auto;margin:0 20px 10px 0;background:hotpink}
div.datetime.dt-style2 .datetime-inner{padding:5px 10px}
div.datetime.dt-style2 p{display:inline;padding:0px;text-align:center;color:midnightblue;font-size:11px;line-height:1}
div.datetime.dt-style2 p.day{font-size:18px}


div.datetime.dt-style3{width:auto;height:auto;margin:0 20px 10px 0;background:hotpink;border-radius:5px;box-shadow:0 0 3px rgba(0,0,0,0.7)}
div.datetime.dt-style3.dt-alignment-left{margin:0 20px 10px 3px}
div.datetime.dt-style3.dt-alignment-right{margin:0 3px 10px 20px}
div.datetime.dt-style3 .datetime-inner{padding:5px 10px}
div.datetime.dt-style3 p{padding:0px;text-align:center;color:midnightblue;font-size:11px;line-height:1}
div.datetime.dt-style3 p.day{font-size:18px;line-height:1.3}


div.datetime.dt-style4{width:auto;height:auto;margin:0 20px 10px 0;background:hotpink;border-radius:5px;box-shadow:0 0 3px rgba(0,0,0,0.7)}
div.datetime.dt-style4.dt-alignment-left{margin:0 20px 10px 3px}
div.datetime.dt-style4.dt-alignment-right{margin:0 3px 10px 20px}
div.datetime.dt-style4 .datetime-inner{padding:5px 10px}
div.datetime.dt-style4 p{display:inline;padding:0px;text-align:center;color:midnightblue;font-size:11px;line-height:1}div.datetime.dt-style4 p.day{font-size:18px}


div.datetime.dt-style5{margin:30px 0 10px 0;border-bottom:1px solid hotpink;padding:0px;background:none;height:auto;width:100%;overflow:hidden}
div.datetime.dt-style5 .datetime-inner{padding-bottom:3px}
div.datetime.dt-style5.dt-alignment-right .datetime-inner{float:right}
div.datetime.dt-style5.dt-alignment-left .datetime-inner{float:left}
div.datetime.dt-style5 p{margin:0px;padding:0 1px 0 0;color:midnightblue;display:inline;font-size:11px;line-height:1}

div.datetime.dt-style5 p:last-child{padding:0}
div.datetime.dt-style5 p.dt-hide{display:none}


div.datetime.dt-style6{margin:30px 0 10px 0;border-bottom:1px solid
hotpink;padding:0px;background:none;height:auto;width:100%;overflow:hidden}
div.datetime.dt-style6 .datetime-inner{padding:3px 5px;background:hotpink}
div.datetime.dt-style6.dt-alignment-right .datetime-inner{float:right;border-radius:5px 5px 0 0}
div.datetime.dt-style6.dt-alignment-left .datetime-inner{float:left;border-radius:5px 5px 0 0}
div.datetime.dt-style6 p{margin:0px;padding:0 1px 0 0;color:midnightblue;display:inline;font-size:11px}
div.datetime.dt-style6 p:last-child{padding:0}
div.datetime.dt-style6 p.day{font-size:18px;line-height:20px}
div.datetime.dt-style6 p.dt-hide{display:none}


div.datetime.dt-style7{width:auto;height:auto;background:none}
div.datetime.dt-style7.dt-alignment-left{margin:0 20px 10px 0;border-right:1px solid hotpink;padding:2px 5px 2px 0}
div.datetime.dt-style7.dt-alignment-right{margin:0 0 10px 20px;border-left:1px solid hotpink;padding:2px 0 2px 5px}
div.datetime.dt-style7 .datetime-inner{padding:0}
div.datetime.dt-style7 p{padding:0px;text-align:center;color:midnightblue;font-size:11px;line-height:1.2}
div.datetime.dt-style7 p.day{font-size:25px;line-height:20px;font-weight:bold;color:hotpink}


div.datetime.dt-style8{width:70px;height:40px;background:none;position:relative}
div.datetime.dt-style8.dt-alignment-left{margin:0 30px 30px 0}
div.datetime.dt-style8.dt-alignment-right{margin:0 30px 30px 0}
div.datetime.dt-style8 .datetime-inner{padding:0}
div.datetime.dt-style8 p{width:30px;color:midnightblue;line-height:none;font-size:10px;text-align:left !important}

div.datetime.dt-style8 p.day-word,div.datetime.dt-style8 p.mon,div.datetime.dt-style8 p.yr{float:right;line-height:1.4;margin-left:20px;width:30px}
div.datetime.dt-style8 p.day{width:30px;height:40px;border-right:1px solid midnightblue;padding:5px
5px 0 0;color:hotpink;position:absolute;left:0px;font-size:24px;font-weight:bold;line-height:0.5}


div.datetime.dt-style9{float:none;width:auto;height:auto;margin:0;background:none}
div.datetime.dt-style9.dt-alignment-left{margin:0}
div.datetime.dt-style9.dt-alignment-right{margin:0}
div.datetime.dt-style9 .datetime-inner{padding:0}
div.datetime.dt-style9 p{padding:0;text-align:left;color:midnightblue;font-size:inherit;line-height:1}
div.datetime.dt-style9 p.day{line-height:normal}
p.dt-hide{display:none}

Write a comment

Comments: 2
  • #1

    wlp (Friday, 03 July 2015 12:31)

    http://www.guccihandbags.com.co/
    http://www.gucci-outlet.in.net/
    http://www.gucci--outlet.com.co/
    http://www.guccishoes.net.co/
    http://www.guccishoes.us.org/
    http://www.hermesbags.com.co/
    http://www.hermesbirkin.com.co/
    http://www.hermesoutlet.net.co/
    http://www.hollister.us.org/
    http://www.hollisterclothing-store.in.net/
    http://www.insanityworkout.net.co/
    http://www.iphone-cases.us/
    http://www.ralphlaurenpolo.in.net/
    http://www.ray-ban-outlet.us.com/
    http://www.raybans.us.org/
    http://www.rayban-sunglasses.org.uk/
    http://www.rayban-sunglasses.us.org/
    http://www.raybansunglassesoutlet.net.co/
    http://www.raybanwayfarer.in.net/
    http://www.replicahandbags.com.co/
    http://www.replicawatches.us.com/
    http://www.retro-jordans.com/
    http://www.rolex-watches.me.uk/
    http://www.rosherun.org.uk/
    http://www.rosheruns.us/
    http://www.salvatoreferragamo.in.net/
    http://www.soccer-shoes.org/
    http://www.softball-bats.us/
    http://www.suprashoe.net/
    http://www.swarovskicrystal.com.co/
    http://www.swarovskijewelry.com.co/
    http://www.swarovski-uk.org.uk/
    http://www.the-northface.com.co/
    http://www.the-northface.in.net/
    http://www.thenorth-face.org.uk/
    http://www.thenorthface.us.org/
    http://www.thenorthfacejackets.in.net/
    http://www.thomassabo-uk.org.uk/
    http://www.tiffanyandco.net.co/
    http://www.tiffanyjewelry.us.org/
    http://www.tory-burch-outlet.in.net/
    http://www.tory-burchoutlet.us.com/
    http://www.louboutin.jp.net/
    http://www.louis-vuittoncanada.ca/
    http://www.louisvuitton.jp.net/
    http://www.louis--vuitton.org.uk/
    http://www.louisvuitton.so/
    http://www.louisvuittonas.com/
    http://www.edhardy.in.net/
    http://www.levisjeans.com.co/
    http://www.bcbgdresses.net/
    http://www.bebeclothing.net/
    http://www.harrods-london.co.uk/
    http://www.guccishoes.com.co/
    http://www.ralphlaurenoutletonline.us.org/
    http://www.true-religion.com.co/
    http://www.truereligionjeans.net.co/
    http://www.truereligion-outlet.com.co/
    http://www.uggaustralia.net.co/
    http://www.uggboots.net.co/
    http://www.uggbootsclearance.com.co/
    http://www.uggsonsale.com.co/
    http://www.uggsoutlet.com.co/
    http://www.uptocoachoutlet.com/
    http://www.vansshoes.us/
    http://www.weddingdressesuk.org.uk/
    http://www.yogapants.com.co/
    http://www.ugg-boots.us.org/
    http://www.poloralphlaurenoutlet.net.co/
    http://www.burberryoutletonline.ar.com/
    http://www.toms-outlet.net.co/
    http://www.michaelkors.in.net/
    http://www.christianlouboutinoutlet.net.co/
    http://www.toryburchsale.com.co/
    http://www.pradaoutlet.com.co/
    http://www.longchamp-handbags.in.net/
    http://www.longchampoutlet.com.co/
    http://www.chanel-bags.com.co/
    http://www.truereligion-outlet.us.org/
    http://www.abercrombie-and-fitch.us.com/
    http://www.timberlandboots-outlet.net/
    http://www.timberland-shoes.com/
    http://www.tommyhilfiger.net.co/
    http://www.tommy-hilfigeroutlet.com/
    http://www.tomshoesoutlet.com/
    http://www.toms-outlet.in.net/
    http://www.toms-shoes.com.co/
    http://www.hollisterclothing.in.net/
    http://www.newbalance-shoes.org/
    http://www.converse--shoes.net/
    http://www.lululemonoutlet.com.co/
    http://www.nfl-jerseys.in.net/
    http://www.cheapjerseys.us.org/
    http://www.rolex-watches.us.com/
    http://www.rolexwatchesforsale.us.com/
    http://www.p90xworkout.in.net/
    http://www.giuseppezanotti.com.co/
    http://www.maccosmetics.net.co/
    http://www.instyler.in.net/
    http://www.mizunorunning.net/
    http://www.handbagsoutlet.com.co/
    http://www.hilfigeroutlet.in.net/
    http://www.kate-spade.com.co/
    http://www.katespade-outlet.com.co/
    http://www.kate-spades.com/
    http://www.longchamp.us.org/
    http://www.longchamp.com.co/

  • #2

    Nike Air Max 2017 (Sunday, 03 September 2017 03:55)

    http://www.yeezyboost350.us.com/ Yeezy Boost 350

    http://www.max2017.us/ Air Max 2017

    http://www.birkenstock-sandals.org.uk/ Birkenstock Sandals

    http://www.vapor-max.org/ Nike Vapormax

    http://www.yeezyboost350v2.com/ Yeezy Boost 350 V2

    http://www.spinnerfidgettoy.us/ Spinner Fidget

    http://www.yeezyzebra.us/ Yeezy Zebra

    http://www.raybanoutletclearance.com/ Ray Ban Outlet

    http://www.yeezy-boost350v2.com/ Yeezy Boost 350 V2

    http://www.nfljerseys.us/ NFL Jerseys

    http://www.longchampbags.us.com/ Longchamp

    http://www.yeezyboost350.us.com/ Adidas Yeezy

    http://www.adidas-uk.org.uk/ Adidas UK

    http://www.yeezy-shoes.us.com/ Yeezy shoes

    http://www.raybansunglasses.ca/ Ray-Ban Sunglasses

    http://www.yeezys.org/ Yeezys

    http://www.yeezyboost-350.org.uk/ Yeezy

    http://www.kade-sapde.us.com/ Kade Sapde

    http://www.adidasoutlets.us.com/ Adidas Outlet

    http://www.nike-stores.fr/ Nike Store

    http://www.underarmouroutlet.us.com/ Under Armour Outlet

    http://www.timberlanduk.org.uk/ Timberland

    http://www.jordan12.us/ Jordan 12

    http://www.nikeairmax.us/ Nike Air Max

    http://www.outlettoms.us/toms-women-c-1/ Toms Outlet

    http://www.ultraboostuncaged.us/ Adidas Ultra Boost

    http://www.mlb-jerseys.us/ MLB Jerseys

    http://www.adidas-nmds.com/ Adidas NMD R1

    http://www.yeezy-boost350.com/ Yeezy Boost 350

    http://www.oakleyoutlet.net.co/ Oakley Outlet

    http://www.katespadeoutlets.us/ Kate Spade Outlet

    http://www.adidas-outlet.org/ Adidas Outlet

    http://www.nikeairmax-90.com/ Nike Air Max 90

    http://www.timberland-outlet.us/ Timberland Outlet

    http://www.adidas-nmd.org.uk/ Adidas NMD

    http://www.adidaseqt.com/ Adidas EQT

    http://www.ralphlaurens.org.uk/ Ralph Lauren

    http://www.tomsoutlet-online.us.com/ Toms Outlet

    http://www.jordan4.us/ Jordan 4

    http://www.birkenstock.me.uk/ Birkenstock

    http://www.adidasnmdoutlet.com/ Adidas NMD

    http://www.katespadeoutlet.us.org/ Kate Spade Outlet

    http://www.longchamp-outlet.ca/ Longchamp Outlet