javascript - 这个 js 小部件中的 css 有什么问题？

Question

请看http://jsfiddle.net/tMxmp/

为什么 td 中的图片尺寸过大。

大小应该是 100 像素，但实际上是 4000 像素。

应用的css规则是

   var style="<style type='text/css'>";



//div rules
   style+="#w_23522{";
   style+="width:1000px;";
   //style+="margin: 2px auto;";
   //style+="overflow: hidden;";
   style+="}";

   //table rules
   style+="#w_23522 .w_23522_table{";
   style+="width:1000px;";
   style+="background:#ffff60;";
   style+="border:5px solid #ff2020 !important;";
   style+="}";

   //td rules
   style+="#w_23522 .w_23522_table td{";
   //style+="text-align: center;";
   style+="padding:0px !important;";
   style+="}";

   //article rules
   style+="#w_23522 .w_23522_article{";
   //style+="text-align: center;";
   style+="margin: 0 auto;";
   style+="width: 100px;";
   style+="}";

   //text rules
   style+="#w_23522 .w_23522_text{";
   style+="width:100px;";
   style+="text-align: center;";
   style+="font-family:Arial, Helvetica, sans-serif;";
   style+="font-size:13px !important;";
   style+="color:#0000cc;";
   style+="text-transform:normal;";
   style+="text-decoration:none;";
   style+="font-weight:normal !important;";
   style+="padding: 2px;";
   //style+="font-color:white;";
   style+="}";

   //link rules
   style+="#w_23522 .w_23522_text a{";
   style+="text-align: center;";
   style+="font-family:Arial, Helvetica, sans-serif;";
   style+="font-size:13px !important;";
   style+="color:#0000cc;";
   style+="text-transform:normal;";
   style+="text-decoration:none;";
   style+="font-weight:normal !important;";
   style+="padding: 2px;";
   style+="}";

   //hover link rules
   style+="#w_23522 .w_23522_text a:hover{";
   style+="font-family:Arial, Helvetica, sans-serif;";
   style+="font-size:13px !important;";
   style+="color:#0000cc;";
   style+="text-transform:normal;";
   //changed the decoration so the links get an underline
   style+="text-decoration:underline;";
   style+="font-weight:normal !important;";
   style+="padding: 2px;";
   style+="text-align: center;";
   style+="}";

   //image rules
   style+="#w_23522 img{";
   style+="text-align: center;";
   style+="width: 100px;";
   style+="height: 75px;";
   style+="border: 3px solid #2020d2;";
   style+="padding: 2020px !important;";
   style+="margin: 2px 0px 0px 0px;";
   style+="}";

   //disabled text rules
   //style+="#w_23522 .w_23522_text{";
   //style+="width:100px;";
   //style+="text-align:center;";
   //style+="line-height:1.1 !important;";
   //style+="}";

   //spacing rules
   style+=".w_23522_space{";
   style+="height:10px;";
   style+="}";
   style+=".w_23522_space2{";
   style+="height:2px;";
   style+="}";

   style+="</" + "style>";

Answer 1

在这个外部文件中生成这段代码:

#w_23522 .w_23522_table {
  width:1000px;
}

指的是表类。

然后你生成这个:

#w_23522 img {
  padding: 2020px !important;
}

除了一团糟之外，您还期望发生什么？