0

最初に、私は一般的にコーディングにかなり慣れていないので、回答を具体的にしてください=)私が取り組んでいるサイトの画像の周りの境界線に問題があります. ここでサイトを見ることができます: http://eventswithvizability.ca/

ページのリロード時に回転する 10 枚の画像があります。ここで HTML を確認できます。

    <SCRIPT LANGUAGE="Javascript">
    function banner() { } ; b = new banner() ; n = 0
    b[n++]= "<IMG name=randimg  CLASS='aligncenter1'>"
    b[n++]= "<IMG name=randimg   CLASS='aligncenter2'>"
    b[n++]= "<IMG name=randimg   CLASS='aligncenter3'>"
    b[n++]= "<IMG name=randimg   CLASS='aligncenter4'>"
    b[n++]= "<IMG name=randimg   CLASS='aligncenter5'>"
    b[n++]= "<IMG name=randimg   CLASS='aligncenter6'>"
    b[n++]= "<IMG name=randimg  CLASS='aligncenter7'>"
    b[n++]= "<IMG name=randimg   CLASS='aligncenter8'>"
    b[n++]= "<IMG name=randimg   CLASS='aligncenter9'>"
    b[n++]= "<IMG name=randimg  CLASS='aligncenter10'>"
    i=Math.floor(Math.random() * n) ; 
    document.write( b[i] )
    </SCRIPT>

基本的に、画像の周りに境界線は必要ありません。私はfirebugをインストールしており、画像のスタイルを読み取っている要素を調べるとわかります（境界線はありません）が、画像の周りにまだ境界線が表示されているという事実を変更することはありません。

    media="all"
    img[class*="align"], img[class*="wp-image-"] {
    margin: auto;
    border: none !important;
    border-style: none !important;
    border-width: 0 !important;
    border-bottom-color: transparent !important; 
    /*test to see if I can get rid of bottom border*/
    }

doctype を修正し、リセット スタイルシートを追加し、あちこちに !important を追加し、Google で追跡できるすべてのものを読んでみましたが、まだこのborder-style:initial; を取得しています。どこかのスクリプト。それがブラウザの場合、リセットされたスタイルシートがそれを処理するはずです..そうですか？

助けてください！私はこれを理解しようとしてバティになります。

4

1 に答える 1

2

簡潔な答え

imgこれはレンダリング エンジンのバグであり、タグに背景として透明な .PNG を指定してから再スケーリングしようとすると発生します。これは、次のいずれかで修正できます。

  1. imgタグをタグに変更するとdiv、ブラウザは背景を与えるのにそれほど苦労しなくなります。
  2. imgタグの background プロパティを設定するのではなく、src代わりに画像の URL を設定します。

長い答え

境界線は CSS で作成されていません。新しい境界線のような境界線プロパティを追加するborder:1px solid blackと、問題を引き起こしている境界線と共存するため、これがわかります。同様に、border-style:initial過失はありません。それはあなたの発言の単なる副作用ですborder-none（initial要素が属性のデフォルト値を取る必要があることを意味します）。

技術的な原因は、透明な .PNG を再スケーリングする際のブラウザ レンダリング エンジンのバグに関係しています。他の場所で発見された同様のバグの例は、こことここにあります。

しかし、あなたの場合、問題の最も近い原因は、画像を表示するために使用されているやや非正統的な方法、特にタグの背景 (ソースではなく) として透明な .PNG を使用しているようimgです。img透明な .PNG を引き伸ばして の背景を塗りつぶすプロセスで、レンダリング エンジンが境界線のように見える灰色のアーティファクトを作成している場合でなくても、これは悪い習慣です。

Javascript で 2 番目のオプションを実装する場合は、次のようにします。

<script language="javascript">
    i= Math.floor(1 + Math.random() * 9);
    if (i < 10) {
        i = "0" + i
    }
    document.write('<img src="http://eventswithvizability.ca/wp-content/themes/lugada/images/bottom' + i + '.png" class="random_image" id="random_image_' + i + '" alt="" />')
</script>

個別に格納された各画像のコードを使用して配列を作成するのではなく、ランダム変数を生成し、文字列連結を使用imgしてその場でタグをパッチすることができることに注意してください。

また、画像ごとに 10 個のカスタム CSS クラスをすべて同じ内容で用意する代わりに、それらすべてに 1 つのクラスを適用することで、一般的に問題を回避できます。id属性は一意である必要がありますが、クラスではないことに注意してください。

于 2013-03-03T01:29:56.473 に答える