Question

这是我的问题：

我正在使用WordPress，我有简单的按钮短代码。

用户可以为他们创建的每个按钮选择颜色，也可以选择按钮悬停时的颜色。

我为每个按钮生成了自定义css <style>标记，它工作正常，但只有一个问题，它在页面中创建了很多<style>标记，并且在使用IE9时（其中有一个限制31）按钮样式不适用。

使用我的短代码函数生成css。

我正在寻找一种将css生成为动态css文件的方法。如果将所有<style>放入单个css文件中，它应该适用于IE，但我不知道如何做到这一点。

任何帮助都将不胜感激。

Answer 1

您可以使用jQuery解决它：

function isIE() {
    return (navigator.userAgent.toLowerCase().indexOf('msie ') != -1) || (!!navigator.userAgent.match(/Trident.*rv[:]*11\./));
}

$(function() {
    if (isIE()) {
        //merging all the content in your generated styles
        var styles = $("style").text();
        //getting rid of the many unneeded styles
        $("style").remove();
        //Putting back all the styles into your document
        $("head").append("<style>" + styles + "</style>");
    }
});

我们的想法是将样式合并为单个文本，删除所有样式，然后创建单个样式标记而不是它们。你只需要这个IE，所以我添加了一个函数，你可以用它检查它是否是Internet Explorer，如果是，那么合并样式。

Answer 2

最简单的解决方案是在页面的头部生成一个自定义样式部分，假设它们是动态生成的。您需要在本节之前插入主要CSS文件才能覆盖值。

Answer 3

如果您也喜欢，可以使用＆f; fopen（）＆＃39;

将所有自定义CSS发送到新文件

function CreateCustomCSSFile(){
$file = fopen("wp-content/themes/your_theme/css/your_stylesheet_custom_file.css","w"); // change the target path as you like
$Color1 = '#eee'; // your custom color 1 - replace the Hex value with the custom field input
$Color2 = '#000'; // your custom color 2 - replace the Hex value with the custom field input
// getting the custom values into css
$TheCSSLayout = '
.someclass1
{
    background: ' . $Color1 . ';
}

.someclass2
{
    background: ' . $Color2 . '; 
}
';
fwrite($file, $TheCSSLayout); // writing to the file
fclose($file); // closing the file
}
CreateCustomCSSFile();

将其插入到function.php文件中并将新文件调用到头部的css包含文件的末尾，这样它将覆盖默认的css设置。

将自定义css添加到生成的CSS文件中

3 个答案: