CSS压倒一切的宽度和高度属性。为什么？ [英] CSS overriding width and height attribute. Why?

问题描述

当我有属性的图像宽度和高度我的CSS是压倒一切的这些属性，但如果我有内嵌-styles宽度和高度我的外部CSS不会覆盖内联样式。为什么呢？

举例code不添加CSS：

\r

\r

＆LT; IMG类=PICSRC =HTTP：// CDN。 cutestpaw.com/wp-content/uploads/2012/07/l-Wittle-puppy-yawning.jpgWIDTH =100HEIGHT =100/＆GT;

\r

\r

\r

举例code添加了CSS：

\r

\r

.PIC {\r
  宽度：汽车;\r
  身高：汽车;\r
}

\r

＆LT; IMG类=PICSRC =HTTP：// CDN。 cutestpaw.com/wp-content/uploads/2012/07/l-Wittle-puppy-yawning.jpgWIDTH =100HEIGHT =100/＆GT;

\r

\r

\r

例子code。与内嵌样式：

\r

\r

.PIC {\r
  宽度：汽车;\r
  身高：汽车;\r
}

\r

＆LT; IMG类=PICSRC =HTTP：// CDN。 cutestpaw.com/wp-content/uploads/2012/07/l-Wittle-puppy-yawning.jpg的风格=宽度：100像素，高度：100像素/＆GT;

\r

\r

\r

解决方案

有关重写像这样的HTML标签直接使用宽，格风格=宽度属性：100是必要的，你把重要的！你的CSS code后，例如像这样：

  .PIC {
   ！宽度：汽车重要的;
   ！高度：汽车重要的;
}
 

When I have an image with attributes width and height my css is overriding these attributes but if I have inline-styles with width and height my external css doesn't override the inline-styles. Why?

Example code without added CSS:

<img class="pic" src="http://cdn.cutestpaw.com/wp-content/uploads/2012/07/l-Wittle-puppy-yawning.jpg" width="100" height="100" />

Example code with added CSS:

.pic {
  width: auto;
  height: auto;
}

<img class="pic" src="http://cdn.cutestpaw.com/wp-content/uploads/2012/07/l-Wittle-puppy-yawning.jpg" width="100" height="100" />

Example code with inline style:

.pic {
  width: auto;
  height: auto;
}

<img class="pic" src="http://cdn.cutestpaw.com/wp-content/uploads/2012/07/l-Wittle-puppy-yawning.jpg" style="width: 100px; height: 100px" />

解决方案

For override a property like "width" used directly in the html tag on this way "div style="width: 100" is necessary that you put !important after your css code, for example something like this:

.pic {
   width: auto!important;
   height: auto!important;
}

这篇关于CSS压倒一切的宽度和高度属性。为什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！