2016-12-31 71 views
0

雖然試圖使線性漸變儘可能跨瀏覽器兼容,但我遇到了一個問題。 Konqueror不會合作。如何在Konqueror中產生漸變

當您搜索線性漸變的Konqueror你會發現-khtml前綴線性漸變的例子很多,簡單地提/*的Konqueror */好像就是這樣。但問題是,那些不起作用。這些變體都沒有。

而我甚至不試圖讓它在舊版本中運行。這是與當前Debian(和派生版)一起發佈的最新版本。

所以我錯過了什麼?爲了在Konqueror中顯示這些內容,我需要做些什麼?

div {height:14px; max-width:500px; border:1px solid; margin:6px; background-repeat: repeat-y;}
KHTML variant 1: 
 
<div style="background: -khtml-linear-gradient(90deg, #5F5, #FF5)"></div> 
 
KHTML variant 2: 
 
<div style="background-image: -khtml-linear-gradient(top left, #5F5, #FF5);"></div> 
 
KHTML variant 3: 
 
<div style="background: -khtml-gradient(linear, left top, right top, from(#5F5), to(#FF5))"></div> 
 
KHTML variant 4: 
 
<div style="background-image: -khtml-gradient(linear, left top, from(#5F5), to(#FF5))"></div> 
 
KHTML variant 5: 
 
<div style="background: -khtml-gradient(linear, left top, #5F5, #FF5)"></div> 
 
KHTML variant 6: 
 
<div style="background-image: -khtml-gradient(linear, 90deg, #5F5, #FF5)"></div> 
 
KHTML variant 7: 
 
<div style="background: -khtml-gradient(linear, to right, #5F5, #FF5)"></div> 
 

 
Current standard: 
 
<div style="background: linear-gradient(90deg, #5F5, #FF5)"></div> 
 
And what we're actually after: 
 
<br><img src="https://i.stack.imgur.com/3jHTv.png" alt="">

回答

0

我測試https://www.htmlvalidator.com/test/201708/khtml.htmlbrowsershots.org並沒有KHTML前綴背景在任何瀏覽器工作,最根本就沒在CSE HTML Validator是否。另外,我無法發現那些在Konqueror中實際上起作用的漸變。

所以我想說,你的困境的答案是刪除所有這些khtml漸變,只是使用一個簡單的純色,然後使用至少在一些瀏覽器,特別是標準的工作的漸變。 Konqueror應該回歸到純色。

+0

但是,那麼所有說「-khtml-爲Konqueror」的例子從哪裏來? [Here](http://www.techrepublic.com/blog/web-designer/first-look-at-css3-web-design-elements/),[here](https://holgerjust.de/2010/跨瀏覽器的CSS梯度/),[這裏](https://github.com/jschoolcraft/funnelhq/blob/master/app/assets/stylesheets/lib/mixins/css3/_gradient.scss),[這裏] (https://groups.google.com/forum/#!topic/txp-svn/VBgo8NhQQfU)等。這些人中沒有人真的測試過他們的工作嗎? –

+0

@MrLister,我真的不知道他們在哪裏提出這個問題,或者他們甚至測試了它......也許有人制作了它,其餘的人只是不停地重複它。或者可能有(或曾經)某個版本的Konqueror在那裏工作(或曾經工作過)。但我會認爲,如果它確實有效,那麼browsershots.org會顯示它正在工作。 –