使用CSS在多个浏览器中修改使用PHP生成的类 [英] modifying a class generated in PHP across multiple browsers using CSS

问题描述

正在进行的网站： http://www.modernfuture.net/wordpress

我一直在努力保持跨浏览器的连续性，并且遇到了针对Chrome 1 + / safari 3 +的媒体查询攻击

  @media屏幕和（-webkit-min-device-pixel-ratio：0）{
 / * ... * / 
} 
  

我已经在chrome / safari中以不同的方式重新使用了#social .logo-img和.featuredThumb，因为它们是定位这些元素的方式与在Firefox 23中的不同。使用这些非常棒的代码，我可以重新编译#social和.logo-img，但不能使用.featuredThumb。我对这个原因的猜测是.featuredThumb类是在PHP中生成的，但我不确定这是为什么 发生了。

以下是生成.featuredThumb类的PHP代码片段。

 <？php the_post_thumbnail（array（287,250），array（'class'=>'featuredThumb'））; //在数组内声明你需要的像素大小？> 
  

我真的可以在这件事情上使用一些帮助！谢谢大家!!

解决方案

我认为您需要更改

  top：92px; 
  

到：

  top：-92px; 
  

适合我。不知道这是你之后：/ $ /

site in progress: http://www.modernfuture.net/wordpress

I've been trying to maintain cross-browser continuity and I came across a media query hack that targets chrome 1+/safari 3+

@media screen and (-webkit-min-device-pixel-ratio:0) {  
/* ... */
}

I've used this to restyle #social .logo-img and .featuredThumb differently in chrome/safari as they were positioning these elements differently than in Firefox 23. Using this awesome bit of code I was able to restyle #social, and .logo-img but not .featuredThumb. My guess for the cause of this is that the .featuredThumb class was generated in PHP but I'm not sure why this is happening.

Here's the piece of PHP code that's generating the .featuredThumb class

<?php the_post_thumbnail(array(287,250), array('class' => 'featuredThumb')); // Declare pixel size you need inside the array ?>

I could really use some assistance with this matter please! Thank you all!!

解决方案

I think you need to change

top: 92px;

to:

top: -92px;

that works for me. Not sure if this is what youre after :/

这篇关于使用CSS在多个浏览器中修改使用PHP生成的类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！