我使用transform：scale on pseudo element：first-letter,为段落的第一个字母制作drop-caps.虽然transform：scale和：first-letter都可以在Firefox中运行,但它在Chrome中运行良好,但在Firefox中运行效果不佳.

HTML

<p>Lorem ipsum dolar sit amet</p>

CSS

p:first-letter {
float: left;
margin-left: -36px;
margin-top: 10px;
font-size: 53px;
transform: scale(1,2);
-ms-transform: scale(1,2);
-webkit-transform: scale(1,2);
-moz-transform: scale(1,2);
}

这是一个jsfiddle

显然,试图改变：第一行和第一个字母的伪元素正在崩溃Firefox,所以 it was disabled.那是很久以前的事了;在新的错误报告中可能值得重新审视.

似乎没有一个纯粹的CSS解决方法,但您可以使用JavaScript将第一个字母移植到子元素并转换该子元素,而不是使用：first-letter：

var p = document.querySelector('p');
var text = p.innerHTML;
p.innerHTML = '<span>' + text.charat(0) + '</span>' + text.substring(1);

Updated fiddle

我有MuSEO-300主要使用@ font-face,但某些字母组合如“ff”和“fi”在Firefox中消失(在v3.6和v7.0.1中确认).所以“小额信贷”变成“微量”.

请注意,我将这些输出为单个字母,而不是连字.当我在服务器和浏览器上查看源时,例如“coffee”拼写为所有六个字母 – 而不是“ff”的unicode连字符.

输出看起来在Opera,Chrome,Safari和IE(甚至是IE6)中都是正确的.

我从MyFonts下载了MuSEO-300及其网络字体示例模板.

@font-face {
 font-family: 'MuSEO-300';
 src: url('webfonts/151B6C_0.eot');
 src: url('webfonts/151B6C_0.eot?#iefix') format('embedded-opentype'),url('webfonts/151B6C_0.woff') format('woff'),url('webfonts/151B6C_0.ttf') format('truetype'),url('webfonts/151B6C_0.svg#wf') format('svg');
}

并且所有引用的文件都已到位.我像这样调用它：

font-family: 'MuSEO-300',sans-serif;

我尝试了一种不同的字体作为测试(Code Pro Light Demo,也来自MyFonts)和Firefox下载“fi”而不是“ff”.

一个想法出了什么问题？

您可以告诉Firefox跳过查找连字并通过添加将它们视为常规字符 -moz-font-feature-settings：font-face声明中的“liga = 0”.

我对fieldset有一个css问题,并想知道你是否可以提供帮助？

我有一个宽度小于其内容div宽度的字段集.

我希望fieldset显示一个水平滚动条,因为内容太宽但它只适用于IE而不是Firefox.

提前致谢.

埃里克

这是html

@H_301_19@<fieldset> <div> Contents... </div> </fieldset>

我能想到的最好的事情是在字段集中放置2个嵌套的div：

@H_301_19@<fieldset> <div> <div> Contents... </div> </div> </fieldset>

我试图在悬停时将图像从50％灰度滤镜转换为无滤镜状态.

但转换在Firefox中不起作用.是否有可能只使用css在firefox中运行转换？

img {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'saturate\' values=\'0.5\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
    filter: gray alpha(opacity=50); /* IE6-9 */
    -webkit-filter: grayscale(50%); /* Chrome 19+ & Safari 6+ */
    -webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */
    -moz-transition: all .6s ease; 
    -ms-transition: all .6s ease; 
    transition: all .6s ease;
    -webkit-backface-visibility: hidden; /* Fix for transition flickering */
}
img:hover {
    filter: none;
    -webkit-filter: grayscale(0);
}

因为标准过滤器语法是一个URL,所以它不适合转换. Gecko必须实施正在建设的 Filter Effects规范的 shorthands部分才能实现.

在此期间,您可以使用SVG动画执行此操作,但不能仅通过CSS执行此操作.

所以我试图显示图像尽可能大，没有裁剪任何屏幕尺寸。这意味着身高：100％; width：auto in landscape and width：100％; height：自动纵向。

我提供的图像，足够大，以填补视网膜iPad，所以几乎每个屏幕尺寸将缩放图像。它在每个浏览器和方向，除了Internet Explorer& Firefox在横向模式，让它们太大，几乎每个屏幕。这只是在景观，记住你。

代码的相关位为：

<style type="text/css">

            #container {position:absolute; top:0; left: 0; right: 0; bottom:0; display: block;}

            #content {
              text-align: center;
              margin: 0px;
                font-size:0;
                 position: absolute;
                top:0; left: 0; right: 0; bottom: 0
            }

            #content:before {
              content: '';
              display: inline-block;
              height: 100%; 
              vertical-align: middle;
              margin-right: -0.25em; 
             }

            .sponsor {
              display: inline-block;
              vertical-align: middle;
             }

             #content img {
                max-width: 100%;
                width: 100%;
                height:auto;
            } 
@media all and (orientation: landscape) {
                 #main {        
                    top:0;
                    display: block;  
                    width: 100%;
                    height: 100%;                       
                    margin:0px auto; 
                    text-align:center;
                     }

                    #content img {
                                height:100%;
                                width:auto;
                                max-width:auto !important;
                                max-height:100%;
                                display:block;
                                margin:0 auto;
                }

}
</style>

<div  id="content"> 
 <?PHP if (has_post_thumbnail( $post->ID ) ): ?>
 <?PHP $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ),'single-post-thumbnail' ); ?>              
         <div title="Click to flip">

                 <a href="#"> 
                        <img src="<?PHP echo $image[0]; ?>" alt=""https://www.jb51.cc/tag/dis/" target="_blank">display: block;" />
                    </a>

                     <a href="#"> 
                      <img src="<?PHP echo kd_mfi_get_featured_image_url('featured-image-2','post','full'); ?>" alt=""https://www.jb51.cc/tag/dis/" target="_blank">display: none;" />
                    </a>

            </div><?PHP endif; ?>
</div><!-- End div #content -->

我不太喜欢比老IE9，但理想的是想服务一切。然而，只要我可以服务IE9& Firefox我会很高兴。

哦，顺便说一下 – Firefox中的检查器告诉我，宽度：100％的规则是遵循，但显然不是。

提前谢谢了！

你有最大宽度：100％，但100％的什么？在父宽度，对吧？但是父类是一个内联块(with class =“sponsor”)，其宽度未设置，因此其宽度取决于子项，特别是子项的首选宽度。

CSS样式中的布局在CSS规范中未定义。特别地，在这种情况下，孩子的内在宽度取决于父母的宽度，父母的宽度又取决于孩子的内在宽度。有关规范文本请参见http://www.w3.org/TR/CSS21/visudet.html#shrink-to-fit-float，并注意所有“不定义”位。

我建议你给你的< div class =“sponsor”>宽度。这应该处理的问题，我会想。